Calculadora de Especificidade CSS

O que é especificidade CSS?

Quando duas regras CSS direcionam o mesmo elemento e definem a mesma propriedade, o navegador precisa de um critério de desempate para decidir qual vence. Esse critério é a especificidade — uma pontuação calculada a partir do próprio seletor, não de onde a regra aparece na folha de estilos (isso só importa como um critério de desempate final, quando a especificidade é igual). Um seletor mais específico sempre vence um menos específico, independentemente de qual regra foi escrita por último.

O sistema (A, B, C)

A especificidade é expressa como três números, comparados da esquerda para a direita como um número de versão — qualquer diferença em A supera qualquer diferença em B, que supera qualquer diferença em C:

• A — Seletores de ID. Cada #id no seletor adiciona um.
• B — classes, attributes e pseudo-classes. Cada .class, [attr] ou pseudo-class do tipo :hover adiciona um.
• C — types e pseudo-elements. Cada nome de tag (div, a) e cada pseudo-element (::before, ::after e as formas single-colon legacy :before/:after/:first-line/:first-letter) adiciona um.

O seletor universal (*) e combinadores ( , >, +, ~) sempre contribuem zero — eles restringem o que é selecionado, não quão específica é a seleção. Assim, #header marca (1, 0, 0), .nav a:hover marca (0, 2, 1) (dois seletores class-like, um type), e .btn.btn-primary — duas classes no mesmo elemento — marca (0, 2, 0), vencendo uma regra de classe única mesmo sendo do "mesmo tipo" de seletor.

A armadilha :not() / :is() / :has()

CSS moderno marca :not(), :is() e :has() pela especificidade de seu argumento mais específico, não como uma pseudo-class plana. Esta calculadora usa a aproximação mais simples, anterior aos Seletores-4 em vez disso: cada uma delas (e qualquer outra pseudo-class funcional, como :nth-child()) conta como uma única pseudo-class — um +1 plano para B, independentemente do que está entre parênteses. É um corte de escopo documentado, não um bug: mantém o parser simples e é preciso para o caso comum (um único argumento não aninhado), mas subestimará um :not() envolvendo algo com um ID dentro. :where() sempre marca zero, conforme a especificação, não importa seu conteúdo.

Como usar

Cole um seletor CSS por linha — tão simples quanto .btn ou tão complexo quanto #main .content > p::before:hover. Cada linha recebe sua própria linha com suas contagens de ID, class e type mais a pontuação (A, B, C) combinada. Os resultados são atualizados conforme você digita.

FAQ

Por que div > p::before supera #main... ou não? Não supera — um ID (A) sempre supera qualquer número de seletores de type ou pseudo-elements (C), por definição de como os três números são comparados.

A ordem das regras importa se a especificidade for igual? Sim — quando duas regras têm especificidade idêntica, a que aparece depois na cascata (ou foi carregada depois) vence. !important substitui a especificidade completamente, e inline style="" attributes superam qualquer regra baseada em seletor.

Isso lida com listas de seletores como .a, .b? Trate cada grupo separado por vírgula como sua própria linha para uma análise por seletor — uma lista de seletores aplica sua regra a cada seletor independentemente, e cada um pode ter uma especificidade diferente.

Privacidade

A análise e pontuação ocorrem inteiramente no seu navegador. Os seletores que você cola nunca são enviados ou armazenados.