Calculadora de especificidade CSS (a,b,c) online
Calcule a especificidade de um seletor CSS (a,b,c) para entender qual regra vence, no seu navegador.
Specificity: (1,2,3). The larger the tuple (compared left to right), the more the rule wins. Inline styles count as (1,0,0,0) and !important overrides all.
🔒 100 % no cliente — nenhum dado enviado
Calcule a especificidade de qualquer seletor CSS e obtenha o trio (a,b,c) instantaneamente. Perfeito para entender por que uma regra sobrescreve outra e depurar conflitos de estilo. 100% no seu navegador, sem envio de dados a qualquer servidor.
What is it for?
- ▸ Entender por que um estilo CSS não é aplicado apesar da sua regra
- ▸ Comparar dois seletores para saber qual vence
- ▸ Evitar o uso excessivo de !important ajustando seus seletores
- ▸ Ensinar ou revisar regras de especificidade CSS
FAQ
Como se calcula a especificidade de um seletor CSS?
Você conta três categorias: (a) seletores #id, (b) classes, atributos e pseudo-classes, (c) elementos e pseudo-elementos. Cole seu seletor na ferramenta e o trio (a,b,c) é exibido automaticamente.
Qual seletor CSS tem a maior prioridade?
Um estilo inline vence um ID, que vence uma classe, que vence um elemento. Com especificidade igual, a última regra declarada vence, exceto quando !important é usado.
!important conta para a especificidade?
Não, !important não faz parte do cálculo (a,b,c): ele sobrescreve a cascata normal em um nível superior. Duas regras !important são então decididas por suas respectivas especificidades.