Calculadora de Especificidade CSS
Calcule a especificidade de qualquer seletor CSS. Compare dois seletores, entenda qual regra vence e aprenda o sistema de pontuação de especificidade.
Load a preset into Selector A
Specificity Scoring
ID selectors — (a)
#header, #nav
Class / attr / pseudo-class — (b)
.btn, [type=text], :hover
Type / pseudo-element — (c)
div, p, h1, ::before
Universal selector (*), combinators, and :where() contribute 0 specificity.
Como Usar Calculadora de Especificidade CSS
- 1Digite um seletor CSS no campo de entrada.
- 2Veja a pontuação de especificidade dividida por ID, classe e elemento.
- 3Opcionalmente, digite um segundo seletor para comparar qual vence.
- 4Entenda as regras de cascata para seus seletores.
ZenovayAnalytics
Veja quem está no seu site agora mesmo.
- Acompanhamento de visitantes em tempo real
- Privacidade em primeiro lugar, sem banner de cookies
- Configurado em dois minutos
Ferramentas Relacionadas
Formatador e Validador de JSON
Formate, valide e embeleze dados JSON com destaque de sintaxe e detecção de erros.Decodificador JWT
Decodifique e inspecione tokens JWT. Visualize cabeçalho, payload e verifique assinaturas.Codificar/Decodificar Base64
Codifique texto para Base64 ou decodifique Base64 de volta para texto. Suporta dados UTF-8 e binários.Encode/Decode de URL
Codifique ou decodifique componentes de URL. Trate caracteres especiais, strings de consulta e URLs completas.Perguntas Frequentes
Como é calculada a especificidade do CSS?▾
A especificidade do CSS é calculada como um triplo (a, b, c): a = número de seletores de ID (#id), b = número de seletores de classe (.class), seletores de atributo ([attr]) e pseudo-classes (:hover), c = número de seletores de tipo (div, p) e pseudo-elementos (::before). Estilos inline têm especificidade (1,0,0,0) — acima de todas as regras de folha de estilo. !important anula toda especificidade. Seletor universal (*), combinadores (+, >, ~, espaço) e :is()/:not() não adicionam especificidade.
Qual seletor vence quando há um conflito?▾
O seletor com especificidade mais alta vence. Se as especificidades são iguais, a regra que aparece depois na folha de estilo vence (ordem de origem). Para comparar: (1,0,0) derrota (0,9,9) porque IDs superam qualquer número de classes. A comparação não é aritmética — é lexicográfica: compare (a) primeiro, depois (b), depois (c). Um ID sempre derrota qualquer número de classes.
Qual é a especificidade de :is(), :not() e :where()?▾
:is() e :not() pegam a especificidade de seu argumento mais específico: :is(#id, .class) tem especificidade (1,0,0) porque #id é o argumento mais específico. :where() sempre tem especificidade zero independentemente de seus argumentos — útil para classes utilitárias que você quer sobrescrever facilmente. :not() em si contribui zero mas o argumento dentro contribui normalmente.
Como !important afeta a especificidade?▾
!important anula toda especificidade para a propriedade à qual se aplica. No entanto, não altera a pontuação de especificidade. Duas declarações com !important são comparadas por especificidade normalmente. Melhor prática: evite !important. Se você precisa anular uma folha de estilo de terceiros, tente aumentar a especificidade. Use !important apenas para classes utilitárias que nunca devem ser sobrescritas, como .visually-hidden ou .sr-only.
Qual é a especificidade de estilos inline?▾
Estilos inline (style="color: red") têm a especificidade mais alta de qualquer regra baseada em seletor, escrita como (1,0,0,0) na notação de 4 partes que inclui inline. Nenhum seletor em uma folha de estilo pode anular um estilo inline sem !important. É por isso que estruturas CSS geralmente evitam estilos inline — são muito difíceis de anular. Use propriedades personalizadas de CSS ou classes em vez de estilos inline para código mantível.