Calculadora de Especificidade CSS

A especificidade CSS é um peso atribuído a um seletor CSS que determina qual regra de estilo é aplicada quando múltiplas regras correspondem ao mesmo elemento. É representada como um valor de três partes (a, b, c) onde a conta seletores de ID, b conta seletores de classe/atributo/pseudo-classe e c conta seletores de tipo de elemento e pseudo-elementos.

A especificidade é calculada contando três categorias em um seletor: (a) seletores de ID como #header, (b) seletores de classe (.card), de atributo ([type="text"]) e pseudo-classes (:hover, :nth-child), e (c) seletores de tipo (div, p) e pseudo-elementos (::before). O seletor universal (*) e combinadores (+, ~, >) não têm especificidade.

O seletor com maior especificidade vence. Compare os valores (a, b, c) da esquerda para a direita: mais IDs (a) sempre supera mais classes (b), e mais classes sempre superam mais elementos (c). Se a especificidade for igual, a regra que aparece por último na folha de estilos vence.

A pontuação numérica é um valor comparável simplificado (a * 10000 + b * 100 + c) para classificar seletores. Não deve ser interpretada como um valor CSS literal — a especificidade CSS não é um número único, mas uma comparação de três partes.

O !important não faz parte da especificidade — ele substitui todas as outras declarações independentemente da especificidade. Esta ferramenta calcula apenas a especificidade do seletor, não o efeito do !important. Evite usar !important no CSS de produção.

Não. O seletor universal (*) tem especificidade zero (0, 0, 0). Combinadores (+, >, ~, espaço) também não contribuem para a especificidade. Apenas seletores de ID, classe, atributo, pseudo-classe, elemento e pseudo-elemento aumentam a especificidade.

A pseudo-classe :not() em si não tem especificidade, mas o seletor dentro dela tem. Por exemplo, :not(#id) contribui com (1, 0, 0) para a especificidade (um ID). Esta ferramenta considera :not() corretamente analisando o argumento dentro dos parênteses.

:: é a sintaxe moderna de dois pontos duplos para pseudo-elementos (::before, ::after, ::placeholder). A sintaxe legada de um único ponto (:before, :after) ainda é suportada pelos navegadores, mas está obsoleta. Ambas adicionam 1 à contagem c (elemento/pseudo-elemento).

Estilos inline (ex.: style="color: red") têm especificidade (1, 0, 0, 0) — maior que qualquer seletor — representada como uma quarta categoria não coberta por esta ferramenta. Na prática, estilos inline sempre substituem regras da folha de estilos (a menos que !important seja usado).

Sim. Quando dois seletores têm os mesmos valores (a, b, c), o que aparece por último na ordem do fonte vence. Esta ferramenta os exibe com o mesmo rank quando têm pontuações idênticas, e você pode verificar o detalhamento (a, b, c) para confirmar que são equivalentes em peso.

Alta especificidade torna os estilos mais difíceis de substituir e manter. Para substituir um estilo, você precisa escrever um seletor ainda mais específico ou usar !important. Manter a especificidade baixa torna o CSS mais modular e previsível, especialmente em grandes codebases.

Esta ferramenta suporta os seletores CSS3 mais comuns, incluindo IDs, classes, atributos, pseudo-classes (incluindo :not()), pseudo-elementos e seletores de tipo. Seletores modernos complexos como :is(), :where(), :has() podem não ser totalmente analisados.