Calculadora de especificidade de seletor CSS

Esta calculadora recebe um seletor, valida sua estrutura e retorna a contagem conhecida em quatro partes: estilos inline, IDs, classes ou atributos ou pseudoclasses, e tipos de elemento ou pseudoelementos. Ela também aplica as regras especiais de seletores modernos como :is(), :not(), :has(), :where() e :nth-child(). Você pode usá-la para explicar uma sobrescrita inesperada, comparar seletores durante uma refatoração ou acrescentar uma verificação confiável às suas ferramentas de desenvolvimento.

Como interpretar o resultado em quatro partes

O resultado aparece como (inline, ID, classe, tipo). A primeira posição representa declarações de estilo inline; como esta ferramenta recebe um seletor, e não um atributo style de HTML, esse valor é sempre zero. A segunda posição conta seletores de ID, como <code>#checkout</code>. A terceira reúne seletores de classe, seletores de atributo e pseudoclasses; assim, <code>.button</code>, <code>[disabled]</code> e <code>:hover</code> acrescentam uma unidade cada. A quarta conta seletores de tipo de elemento e pseudoelementos, portanto <code>button</code> e <code>::before</code> também acrescentam uma unidade. Seletores universais e combinadores não alteram a contagem. Compare a tupla da esquerda para a direita, sem somá-la como um número decimal: um ID supera qualquer quantidade de classes, e uma classe supera qualquer quantidade de tipos. Os campos nomeados facilitam o uso em código, enquanto o array de especificidade preserva a representação convencional. Lembre-se de que a especificidade é apenas uma parte da cascata. Origem, importância, camadas, proximidade de escopo e ordem no código ainda podem determinar qual declaração vence em uma página real.

Regras das pseudoclasses funcionais

As pseudoclasses funcionais modernas exigem mais do que uma simples contagem de tokens. <code>:is()</code>, <code>:not()</code> e <code>:has()</code> contribuem com a especificidade do seletor mais específico da lista de argumentos; o invólucro não acrescenta peso de classe. Já <code>:where()</code> sempre contribui com zero, mesmo quando o argumento contém um ID. Isso torna <code>:where()</code> útil em padrões de bibliotecas que devem continuar fáceis de sobrescrever. As pseudoclasses estruturais <code>:nth-child()</code> e <code>:nth-last-child()</code> acrescentam uma contagem de pseudoclasse e, quando há uma lista opcional após <code>of</code>, também incorporam o membro mais específico. Outras pseudoclasses funcionais contam no nível de classe, enquanto pseudoelementos contam no nível de tipo. O analisador também reconhece seletores relativos dentro de <code>:has()</code>, caracteres escapados em identificadores, valores de atributo com pontuação, namespaces e as formas antigas com um único sinal de dois-pontos: <code>:before</code>, <code>:after</code>, <code>:first-line</code> e <code>:first-letter</code>. Essas distinções acompanham o modo como autores trabalham com CSS atual, sem tratar os parênteses como texto opaco.

Validação para encontrar erros no seletor

Uma pontuação de especificidade só é útil quando a entrada é um seletor plausível. Por isso, a calculadora rejeita campos ausentes, texto vazio, strings incompletas, colchetes ou parênteses sem fechamento, combinadores malformados, identificadores ausentes depois de ponto ou cerquilha e outros erros estruturais. Ela aceita um seletor por vez. Uma vírgula no nível superior cria uma lista cujos membros podem ter especificidades diferentes; essa entrada é recusada com a orientação de fornecer um único seletor. Calcule cada membro separadamente ao comparar uma lista de regras. O comprimento da entrada é limitado para manter a execução previsível, e o algoritmo não usa sessão de navegador, rede, valor aleatório nem relógio. Assim, entradas idênticas geram o mesmo JSON no widget local, em uma chamada de API, em testes ou em uma verificação de build. Use o resultado como diagnóstico específico: compare os seletores envolvidos e depois confira camadas da cascata, <code>!important</code>, herança e ordem no código se a especificidade não explicar sozinha o estilo renderizado.