01
Compare da esquerda para a direita
IDs vêm antes de classes e atributos; elementos ficam por último. Muitas classes não ultrapassam um ID, e empates mantêm a ordem digitada.
Ferramentas de seletores CSS
Calculadora de especificidade CSS
Digite um seletor por linha. Vírgulas no nível superior viram candidatos separados; a checagem de HTML começa desligada.
Calculadora de especificidade CSS
Um seletor por linha; vírgulas externas separam candidatos.
Digite um seletor.
Seletores e HTML opcional ficam no navegador; recursos externos não são carregados.
Opções
A entrada mudou; o resultado anterior está desatualizado.
Quando uma regra parece perder, a Calculadora de especificidade CSS separa IDs, classes e elementos antes de você alterar a folha. A especificidade de seletores CSS é comparada coluna por coluna, não somada como número decimal.
Use a tabela para comparar seletores CSS e, quando fizer sentido, teste um fragmento HTML local. A prioridade de seletores CSS é diferente de decidir qual declaração vence toda a cascata.
Por que usar a Calculadora de especificidade CSS
Entenda o peso das funções
:is(#dialog, .panel) herda o argumento de maior peso, enquanto :where(#dialog, .panel) sempre soma zero. A Calculadora de especificidade CSS mostra a contribuição de cada trecho e revela um ID inesperado.
Separe peso de correspondência
#missing pode ter pontuação alta e não achar nada no HTML; .card pode achar um elemento com pontuação menor. A ferramenta exibe os dois fatos sem prometer um vencedor da cascata.
Três maneiras de ler o resultado
02
Teste as mesmas opções em funções diferentes
Compare :is() com :where(). Em :nth-child(... of S), o peso da própria pseudoclasse também entra na conta.
03
Ative HTML apenas quando precisar
O fragmento estático informa quantos nós correspondem; não simula hover, foco, pseudoelementos renderizados nem a cascata completa.
O que a comparação revela
Pontuação A-B-C detalhada
Cada seletor exibe IDs, classes/atributos/pseudoclasses e elementos/pseudoelementos com os trechos responsáveis.
Ramos independentes
Vírgulas externas separam candidatos com pontuações próprias. A ordem original dos empates é preservada ao classificar.
Correspondência local opcional
O HTML é analisado em uma árvore inerte, sem executar scripts ou carregar imagens, estilos e URLs externas.
Limites do cálculo
- Não decide a cascata inteira
- Origem, importância, camada, propriedade, escopo e ordem do código também afetam qual declaração se aplica. Aqui se calcula apenas o seletor.
- Inline e !important ficam fora
- style embutido e !important não são componentes das três colunas A-B-C; pertencem a outras etapas da cascata.
- Lista com vírgulas não tem valor único
- Cada ramo pode ter peso e correspondências diferentes. Por isso a lista é dividida antes da comparação.
- Zero correspondências não é zero peso
- A pontuação permanece a mesma se o fragmento não tiver nós. Estados hover e focus e pseudoelementos visuais não são simulados.
Dúvidas sobre a Calculadora de especificidade CSS
Meu CSS é enviado a algum lugar?
Não. Os seletores e o HTML são processados localmente, em uma árvore inerte que não busca imagens nem executa scripts.
Como :not(), :is() ou :has() são pontuados?
:not(), :is() e :has() usam o argumento de maior peso; :where() sempre contribui zero, independentemente do conteúdo.
Estilo inline ou !important afetam essa pontuação?
Não. Estilo inline e !important influenciam outras etapas da cascata e não entram na pontuação A-B-C do seletor.
Como comparar a especificidade de dois seletores?
Coloque um por linha ou separe ramos com vírgula. Compare IDs primeiro, depois classes/atributos e por fim elementos.
O que acontece quando dois seletores têm a mesma especificidade?
Há empate de especificidade. No mesmo contexto de origem, camada e importância, escopo e ordem do código ainda podem decidir.
Encontrou uma pontuação incorreta?
Experimente a Calculadora de especificidade CSS
Compare seletores e, se necessário, verifique um fragmento HTML. A Calculadora de especificidade CSS mantém peso e correspondência separados.