Calculadora de especificidade CSS

O que é especificidade CSS?#

Quando duas regras CSS tentam ambas definir a mesma propriedade no mesmo elemento, o navegador não escolhe a que foi escrita por último — escolhe a com especificidade mais alta. Especificidade é uma pontuação em três partes (A, B, C) que a cascata compara como um número de versão:

• A — seletores de ID (#header).
• B — seletores de classe (.btn), seletores de atributo ([type=email]) e pseudoclasses (:hover, :focus).
• C — seletores de tipo (div, a) e pseudoelementos (::before, ::first-line).

A é comparado primeiro; um empate cai para B, depois C. Um ID (1,0,0) vence qualquer número de classes (0,99,99), que por sua vez vence qualquer número de tipos. O seletor universal *, os combinadores (> + ~) e o seletor de aninhamento & não adicionam nada.

Esta página calcula aquele tuplo para qualquer seletor que você cole — incluindo as pseudoclasses funcionais modernas :is(), :where(), :not(), :has() e a cláusula of S do :nth-child() — classifica uma lista de seletores e mostra exatamente quais peças contribuíram com o quê. É a forma mais rápida de responder à pergunta universal do CSS: “por que a minha regra está perdendo?”

Como usar#

1. Clique em Exemplo para carregar um conjunto de seletores trabalhado, ou limpe a caixa e cole o seu. Você pode digitar um seletor puro (#nav .item) ou uma regra completa (#nav .item { color: red }); a ferramenta lê a parte antes do {.
2. Vários seletores? Separe-os com vírgulas — eles são classificados do mais específico para o menos específico, e o vencedor é sinalizado.
3. O painel direito lista cada seletor com o seu tuplo (A, B, C) e uma decomposição colorida de cada peça contribuinte (vermelho = ID, azul = classe/atributo/pseudoclasse, verde = tipo/pseudoelemento), para que você veja por que a pontuação é o que é.
4. A legenda colorida no topo à direita lembra-lhe qual ponto mapeia para A / B / C.
5. Se a sua regra continha !important, uma nota informativa aparece — !important é uma sobreposição ao nível de declaração que se senta acima da comparação de especificidade, não dentro dela.

Principais funcionalidades#

• Correto nos casos difíceis. :where() contribui sempre (0,0,0); :is() / :not() / :has() assumem a especificidade mais alta entre os seus argumentos; o legado :before e a cláusula of S do :nth-child() são tratados conforme Selectors Level 4.
• Classifica uma lista separada por vírgulas e sinaliza empates, para que você veja num relance qual de várias regras vai vencer.
• Decomposição por peça. Cada #id, .class, [attr], :pseudoclasse, ::pseudoelemento e tipo é discriminado com o texto exato que contribuiu.
• Tolerante a regras completas. Cole a:hover { text-decoration: underline } — comentários são removidos e o bloco de declaração é ignorado automaticamente.
• 100% local. Nada sai da página; nenhum stylesheet é buscado ou avaliado.

Exemplo prático#

Um quebra-cabeça comum de depuração: três regras visam todos o mesmo link, e a cor errada vence. Cole-os na caixa:

.button:hover
:is(.card, #hero) .button
a.button

A saída classifica-os:

O vencedor não é o com mais classes. :is(.card, #hero) herda a especificidade mais alta dos seus argumentos — #hero é um ID, então :is() carrega (1,0,0) embora .card fosse apenas (0,1,0). Adicionar .button aumenta B em um, dando (1,1,0). Aquele único ID na coluna A vence as duas classes de .button:hover (0,2,0) — que é a surpresa exata que torna :is() perigoso em CSS de produção.

Se você precisasse do mesmo agrupamento sem aumentar a especificidade, trocaria :is() por :where():

:where(.card, #hero) .button   →   (0, 1, 0)

Agora ele empata com a.button menos o tipo, e a ordem do código-fonte decide. Esse é o motivo inteiro de :where() existir.

FAQ#

Por que um ID vence centenas de classes?#

A especificidade compara colunas da esquerda para a direita como um número de versão, não como um total somado. (1,0,0) está “à frente” de (0,999,999) porque a coluna A é diferente de zero no primeiro e zero no segundo; as colunas B e C nunca chegam a ser consultadas. Isso é deliberado — IDs foram concebidos para serem singletons inequívocos.

Qual é a diferença entre :is() e :where()?#

São idênticos no que correspondem, mas opostos em especificidade. :is(.a, #b) assume a especificidade mais alta entre os seus argumentos (então #b faz dele (1,0,0)); :where(.a, #b) contribui sempre (0,0,0) independentemente dos seus argumentos. Use :where() para padrões de baixa especificidade que você consegue sobrepor facilmente, e :is() quando quer genuinamente que o seletor combinado concorra.

Um atributo inline style="…" vence estes?#

Sim. Estilos inline superam qualquer regra baseada em seletor na cascata normal (sentam-se numa origem mais alta), então nenhum tuplo de seletor sobreporá um estilo inline sem !important. Este é um eixo separado da pontuação (A,B,C), e é por isso que a ferramenta avalia apenas seletores.

Onde é que o !important se encaixa?#

!important é uma bandeira ao nível da declaração, não uma propriedade do seletor — ele não muda o tuplo (A,B,C). Move a declaração inteira para uma origem de cascata mais alta, então uma regra !important vence uma regra normal independentemente da especificidade. A ferramenta registra a sua presença de forma informativa, mas mantém-na fora da pontuação.