Anúncios incomodam? Ir Sem anúncios Hoje 

Calculadora de Especificidade CSS

CorDesenvolvedor

ANUNCIADO Remover?

ENTRADA

Processo Automático

SAÍDA

Lado cliente

ANUNCIADO Remover?

Guia

Calculadora de Especificidade CSS

O Calculador de Especificidade CSS ajuda você a determinar a pontuação exata de especificidade de qualquer seletor CSS. Entender a especificidade é essencial para depurar conflitos de CSS e escrever folhas de estilo mantíveis. Digite um ou mais seletores e veja instantaneamente suas pontuações (a,b,c) comparadas lado a lado.

Como usar

Digite um seletor CSS por linha no campo de entrada. A ferramenta calculará automaticamente e exibirá a pontuação de especificidade para cada seletor. Quando múltiplos seletores são digitados, o de maior especificidade será destacado em verde para que você possa rapidamente ver qual regra vence.

Características

Avaliação Conforme a W3C – Calcula a especificidade usando o algoritmo oficial (a,b,c): IDs, classes/atributos/pseudo-classes e elementos/pseudo-elementos.
Comparação de Múltiplos Seletores – Digite múltiplos seletores para comparar suas pontuações de especificidade e ver qual delas vence.
Nível 4 dos Seletores CSS – Suporta pseudo-classes modernas como :is(), :not(), :has() e :where(), com tratamento correto de especificidade.
Exibição Visual da Pontuação – Badges com cores e barras proporcionais tornam fácil entender a especificidade de forma rápida.
Processamento do lado do cliente – Todas as calculações ocorrem no seu navegador. Nenhum dado é enviado a nenhum servidor.

ANUNCIADO Remover?

 Perguntas frequentes

O que é especificidade CSS e como é calculada?

A especificidade é um sistema de peso que determina qual regra de CSS é aplicada quando múltiplas regras almejam o mesmo elemento. É calculada como uma pontuação de três partes (a,b,c): a conta seletores de ID, b conta seletores de classe, seletores de atributo e pseudo-classes, e c conta seletores de tipo e pseudo-elementos. Uma pontuação mais alta em uma posição anterior sempre vence, independentemente das posições subsequentes.
Como os pseudo-classes :is(), :not() e :has() afetam a especificidade?

De acordo com o Nível 4 dos Seletores CSS, a especificidade dos pseudo-classes :is(), :not() e :has() é igual à especificidade do seletor mais específico em sua lista de argumentos. Por exemplo, :is(.foo, #bar) tem a especificidade de #bar (1,0,0) porque é o argumento mais específico. O pseudo-classe :where() é a exceção — sempre contribui zero de especificidade.
A ordem das regras de CSS importa quando a especificidade é igual?

Sim. Quando dois seletores têm exatamente a mesma pontuação de especificidade, aplica-se a regra de cascata do CSS: a regra que aparece mais tarde no código-fonte vence. É por isso que entender a especificidade é importante — depender apenas da ordem do código pode gerar folhas de estilo frágeis que quebram quando as regras são reorganizadas.
Por que um seletor de ID supera múltiplos seletores de classe?

O algoritmo de especificidade compara as pontuações posição por posição da esquerda para a direita. Um seletor de ID tem pontuação (1,0,0), enquanto qualquer número de seletores de classe apenas aumenta a segunda posição. Como a posição a é comparada antes da posição b, mesmo um único seletor de ID sempre superará qualquer combinação de seletores de classe, atributo ou pseudo-classe, independentemente do número deles.