Calculadora de especificidade CSS
Seletores CSS
Resumo
Resultados de especificidade
Sobre a calculadora de especificidade CSS
A especificidade CSS decide qual seletor vence quando várias regras miram o mesmo elemento. Esta calculadora mostra a pontuação A-B-C de cada seletor.
Ela conta IDs, classes, atributos, pseudo-classes, elementos e pseudo-elementos, incluindo funções comuns como :is(), :not(), :has() e :where().
Como usar esta ferramenta
- Cole um seletor por linha, uma lista separada por vírgulas ou regras CSS completas.
- Clique em Analisar para calcular a especificidade de cada seletor.
- Compare as pontuações A-B-C e veja qual seletor é mais forte.
Dicas
- Evite IDs desnecessários quando quiser CSS fácil de sobrescrever.
- :where() sempre tem especificidade zero, útil para estilos padrão de baixa prioridade.
- Quando seletores têm a mesma especificidade, normalmente vence a regra que aparece depois.
Verificações de especificidade CSS antes de alterar um override
A pontuação do seletor explica apenas parte da cascata. Camadas, origem, importância, escopo e ordem também podem decidir a regra vencedora.
Compare toda a cascata
Revise origem, cascade layers, !important, especificidade, proximidade de escopo e ordem antes de aumentar o peso.
Mantenha seletores sustentáveis
Prefira classes e limites claros de componentes a IDs, aninhamento profundo ou uma escalada de !important.
Revise seletores funcionais
Lembre que :is(), :not() e :has() usam a especificidade dos argumentos, enquanto :where() sempre contribui zero.
Teste o estado renderizado
Verifique hover, focus, disabled, responsive, temas e conteúdo dinâmico nas ferramentas do navegador.
Ferramentas relacionadas
Você também pode achar essas ferramentas úteis.