Calculadora de Especificidade CSS
Informe um ou dois seletores CSS para ver sua especificidade, mostrada como ids-classes-tipos, e qual venceria em um conflito.
Entradas
Resultados
- Seletor A
- 1-1-1
- Seletor B (opcional, para comparar)
- 0-1-4
A vence
Como a especificidade CSS é calculada
Informe um ou dois seletores CSS para ver sua especificidade, mostrada como ids-classes-tipos, e qual venceria em um conflito.
Como é calculado
IDs contam mais, depois classes, seletores de atributo e pseudo-classes, depois seletores de tipo de elemento e pseudo-elementos. Combinadores como espaço, > e ~ não afetam a especificidade.
Limitações
- `:not()`, `:is()` e `:has()` são contados cada um como uma pseudo-classe, sem olhar dentro do argumento.
- `:where()` sempre conta como zero, seguindo a especificação CSS.
Exemplo prático
`#main .container p` tem especificidade 1 id, 1 classe, 1 tipo (1-1-1), enquanto `nav ul li.active a` tem 0 ids, 1 classe, 4 tipos (0-1-4) — o primeiro seletor vence apesar de corresponder a menos elementos pelo nome.
Notas de cálculo
Todo o cálculo roda no seu navegador; os seletores informados nunca são enviados a lugar nenhum.
Perguntas frequentes
Por que uma regra posterior às vezes vence mesmo com especificidade igual?
Quando a especificidade empata, a regra que aparece depois na folha de estilo (ou tem prioridade de camada CSS maior) vence.
O estilo inline aparece aqui?
Não — atributos `style` inline sempre superam qualquer especificidade baseada em seletor, independentemente do que esta calculadora mostra.
A especificidade depende da ordem das partes em um seletor?
Não — apenas quais tipos de seletores aparecem e quantos de cada, não a ordem em que são escritos.