ToolHub
Abrir ferramenta

Calculadora de Especificidade CSS

Calcule e compare pontuações de especificidade de seletores CSS, com decomposição visual

Ferramentas do desenvolvedor
Iniciar ferramenta Todas as ferramentas

Sobre esta ferramenta

A Calculadora de Especificidade CSS permite inserir qualquer seletor CSS e ver instantaneamente sua pontuação de especificidade, decomposta em três dimensões: ID, classe e elemento. Ela suporta comparação lado a lado de dois seletores, detectando automaticamente o vencedor de especificidade, além de oferecer exemplos de seletores comuns e uma referência de regras de especificidade.

Principais recursos

Pré-visualização rápida

Casos de uso

css specificity selector

Perguntas frequentes

O que é especificidade CSS?

A especificidade CSS é um sistema de pontuação que determina quais regras CSS são aplicadas quando vários seletores apontam para o mesmo elemento. Ela calcula pesos com base no tipo de seletor: seletores de ID têm o maior peso, seguidos por seletores de classe e atributo e, por último, seletores de elemento.

Como a especificidade é calculada?

A especificidade é calculada como uma pontuação de três partes (ID, classe, elemento). Cada seletor de ID adiciona 1 na coluna ID, cada seletor de classe, atributo ou pseudoclasse adiciona 1 na coluna classe, e cada seletor de elemento ou pseudoelemento adiciona 1 na coluna elemento.

O !important substitui a especificidade?

Sim, a declaração !important substitui todos os cálculos normais de especificidade. Quando várias regras !important entram em conflito, aquela com maior especificidade prevalece. Estilos inline também substituem toda a especificidade baseada em seletores.

Posso comparar dois seletores lado a lado?

Sim, a ferramenta oferece um painel de comparação lado a lado onde você pode inserir dois seletores e ver instantaneamente qual tem maior especificidade. Um indicador de vencedor aparece automaticamente ao lado do seletor com a pontuação mais alta.

Quais tipos de seletor a calculadora suporta?

A calculadora suporta seletores de ID, seletores de classe, seletores de atributo, seletores de pseudoclasse (como :hover e :nth-child), seletores de elemento e seletores de pseudoelemento (como ::before e ::after). Exemplos comuns também estão disponíveis e podem ser preenchidos com um clique.

Ferramentas relacionadas

Validador JSONSeletor de CoresGerador de HashGerador de UUID