Como calcular a especificidade de um seletor CSS

Para que serve a calculadora de especificidade CSS

Esta ferramenta ajuda a analisar a especificidade de um seletor CSS sem ter de fazer a contagem manualmente. Introduza um seletor e consulte os seus componentes de especificidade, juntamente com uma pontuação numérica. É útil quando está a comparar regras CSS e quer perceber por que motivo uma regra pode ter prioridade sobre outra.

A análise considera o texto do seletor introduzido e apresenta quatro componentes de especificidade. A pontuação permite comparar resultados através de pesos de 1000, 100, 10 e 1 aplicados a esses componentes. A ferramenta também distingue contribuições associadas a identificadores, seletores de classe, seletores de atributo, pseudo-classes, pseudo-elementos e seletores de tipo, de acordo com as regras de contagem que suporta.

Como utilizar a ferramenta

1. Abra a ferramenta e localize o campo destinado ao texto do seletor CSS.
2. Introduza o seletor que pretende analisar. Pode escrever, por exemplo, um seletor com um identificador, uma classe e um estado pseudo-classe. O campo é opcional, mas um resultado útil requer um seletor não vazio.
3. Reveja o texto antes de iniciar a análise, sobretudo se o seletor contiver espaços, colchetes, dois-pontos ou pseudo-elementos. A representação devolvida para uma entrada não vazia preserva o texto submetido.
4. Execute a análise através do controlo disponível na ferramenta.
5. Consulte os quatro componentes apresentados e a pontuação numérica. Compare primeiro a posição mais significativa e, depois, as posições seguintes; a pontuação usa, respetivamente, os pesos 1000, 100, 10 e 1.
6. Repita a operação com outro seletor quando precisar de comparar regras. Para uma comparação consistente, mantenha o texto de cada seletor tal como é usado nas folhas de estilo.

Se deixar o campo vazio ou introduzir apenas espaços, a ferramenta devolve quatro componentes a zero, uma pontuação de zero e uma representação vazia do seletor. Por isso, esse resultado confirma a ausência de entrada, não a especificidade de uma regra CSS.

Como interpretar o resultado

Os componentes ajudam a localizar a origem da especificidade. Um identificador contribui para o primeiro componente; seletores de classe, de atributo e pseudo-classes contribuem para o segundo; pseudo-elementos e seletores de elemento ou de tipo contribuem para o terceiro. O quarto componente completa a representação apresentada pela ferramenta. O seletor universal não é contado.

A pontuação é uma forma numérica de ordenar os componentes, não uma explicação independente do seletor. Quando o resultado mostra uma pontuação superior a zero, existe pelo menos uma contribuição contabilizada pelas regras suportadas. Uma entrada composta testada produz uma pontuação superior a zero, enquanto uma entrada vazia produz zero.

Interprete os valores dentro do alcance da análise disponível. A ferramenta segue regras de deteção baseadas nos padrões que suporta; não deve ser tratada como um analisador completo para todas as formas possíveis de seletor CSS. Se o resultado parecer inesperado, compare o texto submetido com a representação devolvida e verifique se a construção usada pertence às regras de contagem reconhecidas.

Exemplo prático

Está a comparar uma regra de navegação com outra regra e quer observar a forma como um identificador, um seletor de classe e uma pseudo-classe aparecem no resultado.

Introduza #navegacao .item:hover no campo do seletor e execute a análise; depois, compare os componentes apresentados com o texto conservado na representação devolvida.

A análise devolve quatro componentes de especificidade, uma pontuação numérica e uma representação do seletor submetido, preservando o texto não vazio introduzido.

Limitações

• A interpretação está limitada às regras de deteção e contagem suportadas pela ferramenta, incluindo as contribuições reconhecidas para identificadores, classes, atributos, pseudo-classes, pseudo-elementos, tipos e a exclusão do seletor universal.
• Sem texto de seletor, não há uma regra CSS para analisar: o resultado é composto por zeros e representação vazia.

Erros comuns

• Introduzir apenas espaços e interpretar o resultado como uma regra sem especificidade: a ferramenta trata essa entrada como vazia e devolve quatro zeros, pontuação zero e representação vazia; introduza o seletor completo antes de analisar.

Perguntas frequentes

Posso utilizar a ferramenta sem preencher o seletor?

Sim, desde que introduza um seletor não vazio. Uma entrada vazia ou composta apenas por espaços devolve quatro componentes a zero, pontuação zero e representação vazia.

Como é calculada a pontuação da especificidade?

A pontuação aplica os pesos 1000, 100, 10 e 1 aos quatro componentes, pela mesma ordem em que são apresentados.

O seletor universal entra no cálculo?

O seletor universal não é contado pelas regras de análise da ferramenta. Outros elementos, pseudo-elementos, identificadores, seletores de classe, atributos e pseudo-classes podem contribuir conforme os padrões reconhecidos.