Calculadora de especificidade CSS: qual seletor vence

Como usar

Digite um seletor em Seletor, escrito como está na sua folha de estilo.
Digite um segundo seletor em Segundo seletor (opcional) para comparar os dois, ou deixe o campo vazio.
Leia Especificidade (a, b, c) para o primeiro seletor e Qual regra vence, quando você informar dois.
Use a tabela Partes contadas para ver qual parte de cada seletor deu cada número.

Como os três números são contados

A Recomendação Selectors Level 3 (em inglês) conta um seletor em três colunas. A ferramenta compara os números da esquerda para a direita: primeiro a, depois b e, por fim, c. O seletor universal * e os combinadores, como > e +, são ignorados.

a é o número de seletores de ID, como #nav.
b é o número de seletores de classe, como .active, de seletores de atributo, como [href], e de pseudo-classes, como :hover.
c é o número de seletores de tipo, como li ou a, e de pseudoelementos, como ::before.

Pseudo-classes com argumentos

:is(), :not() e :has() contam como o argumento mais específico, então :is(#a, .b) é (1, 0, 0). :where() não conta nada. :nth-child() conta como uma pseudo-classe mais o seletor mais específico da sua lista “of S”, então :nth-child(even of li, .item) é (0, 2, 0). Essas regras vêm do rascunho Selectors Level 4 (em inglês), que ainda é um Editor's Draft e pode mudar.

O que a ferramenta não faz

Conta um pseudoelemento com argumento, como ::part(x), como um só pseudoelemento e não lê o argumento.
Não lê o aninhamento com &, e aceita um seletor por vez, não uma lista com vírgulas.
Não enxerga a sua folha de estilo. Por isso, quando dois seletores empatam, ela informa que vence a regra que vem depois e deixa a ordem para você verificar.

Exemplo resolvido: um link em uma barra de navegação

O primeiro seletor, #nav li.active > a:hover, tem um ID, #nav. Tem duas classes e pseudo-classes, .active e :hover, e dois tipos, li e a. Sua especificidade é (1, 2, 2). O segundo seletor, #nav a, tem um ID e um tipo, então sua especificidade é (1, 0, 1). O primeiro seletor vence, porque a é igual e b e c são maiores.

Seletor	a	b	c
#nav li.active > a:hover	1	2	2
#nav a	1	0	1

Perguntas frequentes

Por que um ID conta na primeira coluna?

A ferramenta compara as colunas da esquerda para a direita, então a coluna de IDs, a, é decidida primeiro. Um seletor com um ID a mais tem o a maior, e as classes e os tipos de b e c não são analisados nesse caso.

A ordem das regras faz diferença?

Só quando dois seletores têm a mesma especificidade. A especificação CSS Cascade Level 4 (em inglês) diz que, nesse ponto, vence a última declaração na ordem do documento, então a regra que vem depois passa a valer.

Por que :not(#a) aumenta a especificidade?

A própria pseudo-classe :not() não é contada, mas o argumento dela é. O exemplo #s12:not(FOO) da Recomendação Selectors Level 3 é (1, 0, 1): um ID, de #s12, e um tipo, do argumento FOO.

O seletor universal e os combinadores somam alguma coisa?

Não. O seletor universal é ignorado, assim como os combinadores, como >, + e ~. O exemplo * da seção Level 3 tem especificidade (0, 0, 0).

Esta ferramenta considera estilos inline e !important?

Não. Ela conta um seletor. A cascata compara a origem e a importância antes da especificidade, então uma regra marcada com !important ou um estilo inline pode vencer, qualquer que seja a pontuação dos seletores. Compare apenas dois seletores que definem a mesma propriedade com a mesma importância.

O seletor que eu digito é enviado para algum lugar?

Não. A análise roda no seu navegador, e nada do que você digita é guardado ou enviado ao nosso servidor. Verifique o resultado antes de alterar uma folha de estilo.

Fontes

Números e texto verificados pela última vez em quinta-feira, 12 de novembro de 2026.

Resultado