Calculadora de especificidade CSS
Calcula a especificidade do seletor.
Sobre esta ferramenta
A calculadora indica a especificidade clássica (a,b,c) de um seletor, o que explica porque uma regra vence outra sem abrir o DevTools. Avalia apenas o seletor escrito, sem considerar a ordem do ficheiro nem @layer.
Como usar
Escreva ou cole o seletor, execute o cálculo e leia a divisão entre IDs, classes e elementos. Valores baixos tornam as substituições futuras mais simples.
Exemplo
O seletor de exemplo junta elementos e classes, como o CSS antigo de uma navegação.
Entrada
nav.site-header .menu a.activeSaída
Selector: nav.site-header .menu a.active
Specificity: (0,3,2)
IDs: 0
Classes/attributes/pseudo-classes: 3
Elements/pseudo-elements: 2Dica
Quando o !important aparece com frequência, o problema real é a dívida de especificidade.
Bom saber
Como é calculada a especificidade?
Contam-se três grupos: IDs; depois classes, atributos e pseudoclasses; e por fim elementos e pseudoelementos. O resultado aparece como (a,b,c) e compara-se da esquerda para a direita.
!important ou estilos inline aparecem aqui?
Não. Ficam fora do seletor, logo não entram na pontuação (a,b,c). Um estilo inline ou !important vence qualquer especificidade de seletor.