Calculadora de Especificidade CSS

Gratuito DevTools

Calculadora de Especificidade CSS

Calcule a especificidade de qualquer seletor CSS com pontuacao (a,b,c,d). Veja o detalhamento por tipo, compare dois seletores e entenda a cascata de forma visual. Resultado instantaneo, 100% no seu navegador.

5.2k usuarios Atualizado em Mar 2026 4.8/5

Avalie esta ferramenta:

4.8 (741 votos) Obrigado!

Calcular Especificidade

Seletor CSS

Exemplos:

Inline

Estilos inline

IDs

Seletores #id

Classes

.class [attr] :pseudo

Elementos

div ::before

Detalhamento

Digite um seletor para ver o detalhamento

Comparar Seletores

Compare dois seletores e veja qual tem maior especificidade.

Seletor A

(0, 1, 1, 0)

Seletor B

(0, 0, 0, 4)

Seletor A vence: (0,1,1,0) > (0,0,0,4)

Tabela de Referencia

Valores de especificidade por tipo de seletor.

Tipo de Seletor	Exemplo	Pontuacao (a,b,c,d)
Estilo inline	style="color:red"	1000
Seletor de ID	#menu	0100
Seletor de classe	.active	0010
Seletor de atributo	[type="text"]	0010
Pseudo-classe	:hover, :nth-child(2)	0010
Elemento HTML	div, p, a	0001
Pseudo-elemento	::before, ::after	0001
Seletor universal	*	0000

Como Usar

Calcule a especificidade de qualquer seletor CSS em segundos.

Digite o seletor

Insira qualquer seletor CSS no campo de entrada, como #nav .item:hover.

Veja a pontuacao

Os blocos coloridos mostram a pontuacao (a,b,c,d) em tempo real.

Leia o detalhamento

Veja cada parte do seletor e seu tipo: ID, classe ou elemento.

Compare seletores

Use a secao de comparacao para descobrir qual seletor vence na cascata.

Sobre a Calculadora de Especificidade CSS

Esta ferramenta calcula a especificidade de seletores CSS usando o algoritmo oficial da W3C. A especificidade determina qual regra CSS prevalece quando multiplas regras se aplicam ao mesmo elemento.

Como funciona a pontuacao:

a (Inline): estilos aplicados diretamente no atributo style do elemento
b (IDs): seletores de ID como #header ou #menu
c (Classes): classes (.active), atributos ([type="text"]) e pseudo-classes (:hover)
d (Elementos): elementos HTML (div, p) e pseudo-elementos (::before)

A comparacao e feita da esquerda para direita: um seletor com maior pontuacao em b sempre vence sobre qualquer pontuacao em c ou d, independente dos valores.

Artigo

Especificidade CSS: Como Funciona, Por Que Importa e Como Depurar Conflitos

Por Equipe Chipak • Atualizado em Mar 2026 • 7 min de leitura

Neste artigo

O que e especificidade CSS
O sistema de pontuacao (a,b,c,d)
Exemplos praticos de conflito
Especificidade e a cascata CSS
Boas praticas e armadilhas comuns
Perguntas frequentes

1. O Que E Especificidade CSS

Especificidade CSS e o mecanismo que o navegador usa para decidir qual regra CSS se aplica a um elemento quando multiplas regras entram em conflito. Em vez de simplesmente aplicar a ultima regra encontrada, o CSS atribui um peso a cada seletor e aplica o de maior peso.

Entender especificidade e essencial para qualquer desenvolvedor front-end. Sem esse conhecimento, e facil se perder tentando sobrescrever estilos com !important ou adicionando seletores cada vez mais longos ate algo finalmente funcionar.

2. O Sistema de Pontuacao (a,b,c,d)

A especificidade e representada como quatro numeros separados por virgulas: (a, b, c, d). Cada posicao representa um tipo de seletor:

a: 1 para estilos inline (style="..."), 0 caso contrario
b: contagem de seletores de ID (#id)
c: contagem de classes (.classe), atributos ([attr]) e pseudo-classes (:hover, :nth-child)
d: contagem de elementos (div, p, a) e pseudo-elementos (::before, ::after)

A comparacao e feita da esquerda para direita. Um seletor com b=1 sempre vence sobre um seletor com b=0, independente de quantos elementos ou classes o segundo tenha.

3. Exemplos Praticos de Conflito

Considere estas duas regras:

#nav .item — especificidade (0,1,1,0)
div ul li a.item — especificidade (0,0,1,4)

A primeira regra vence porque tem b=1 (um ID), enquanto a segunda tem b=0. Mesmo que a segunda tenha mais seletores de elemento, o ID sempre prevalece.

"Um ID sempre vence sobre qualquer quantidade de classes. Uma classe sempre vence sobre qualquer quantidade de elementos. Nunca misture IDs em seletores CSS reutilizaveis."

4. Especificidade e a Cascata CSS

A especificidade e apenas um dos fatores da cascata CSS. A ordem de resolucao e:

Origem: estilos do user-agent, do usuario e do autor tem pesos diferentes
Importancia: !important eleva qualquer regra acima das demais
Especificidade: seletores mais especificos vencem
Ordem de aparicao: em caso de empate, a ultima regra no CSS vence

5. Boas Praticas e Armadilhas Comuns

Para evitar problemas com especificidade em projetos maiores:

Evite IDs em regras CSS — use-os apenas para JavaScript
Mantenha seletores o mais simples e curtos possivel
Evite !important — ele cria divida tecnica difcil de resolver
Use metodologias como BEM para garantir baixa especificidade e previsibilidade
Use :where() para aplicar estilos sem adicionar especificidade

6. Perguntas Frequentes

!important ignora a especificidade?

Sim. !important eleva a declaracao acima de toda a hierarquia de especificidade normal. Para sobrescrever um !important, voce precisa de outro !important com especificidade igual ou maior. Por isso e uma pratica a ser evitada.

:not() conta na especificidade?

O proprio :not() nao conta, mas o seletor dentro dele conta. Por exemplo, :not(.active) adiciona (0,0,1,0) pela classe .active — o mesmo que .active sozinho.

O seletor universal * tem especificidade?

Nao. O seletor universal * tem especificidade (0,0,0,0) e nao adiciona nenhum peso. Combinadores como >, +, ~ e espaco tambem nao adicionam especificidade.