Calculadora de Especificidade CSS
Desenvolvimento
Quando duas regras CSS miram o mesmo elemento, a cascata escolhe a de maior especificidade — contada como (ID, classe/atributo/pseudo-classe, tipo/pseudo-elemento). Esta ferramenta parseia o seletor, pondera cada parte (#id +1·0·0, .class +0·1·0, div +0·0·1), e processa pseudo-classes como :is(), :not(), :has() (ganha o argumento de maior peso) e :where() (sempre 0). Cole dois seletores pra ver qual ganha a cascata e por quanto.
IDs
1
Classes/attrs/pseudo
2
Tipos/pseudo-el
3
Detalhamento por token
#navID+(1, 0, 0)ulTipo+(0, 0, 1)liTipo+(0, 0, 1).activeClasse+(0, 1, 0)aTipo+(0, 0, 1):hoverPseudo-classe+(0, 1, 0)
Comparar dois seletores
Cole um segundo seletor pra ver qual ganha a cascata.
Seletor A
(1, 2, 3)
← A ganha
Seletor B
(0, 1, 3)
Exemplos
Estilos inline, !important e ordem de origem todos vencem a especificidade do seletor. Esta ferramenta só computa a tupla (ID, classe, tipo) do seletor em si.
Como usar
- Digite ou cole qualquer seletor CSS — a análise atualiza enquanto digita.
- Leia os números (ID, classe, tipo) — a tupla maior ganha a cascata.
- Cole um segundo seletor na caixa de comparação pra ver qual ganha.
Perguntas frequentes
- Por que três números em vez de um?
- A especificidade é comparada coluna por coluna da esquerda: um ID sempre vence qualquer número de classes; uma classe sempre vence qualquer número de seletores de tipo. Somá-los como (0,1,0) + (0,0,10) = 20 é o erro clássico que o CSSWG alerta.
- Como :is(), :not(), :has() contam?
- Tomam a especificidade do argumento de maior peso. :is(#a, .b) = 1·0·0, :not(.a, .b) = 0·1·0. :where() sempre contribui 0·0·0 — útil pra overrides de especificidade zero.
- E pseudo-elementos como ::before?
- Pseudo-elementos (::before, ::after, ::first-line) contam como seletores de tipo (0·0·1). Formas legadas de dois pontos único (:before, :after) também são reconhecidas como pseudo-elementos.
- Inclui estilos inline?
- Não — estilo inline é um bucket 'a' separado (1·0·0·0) que esta ferramenta não modela porque você não pode escrever estilos inline em um seletor. Use !important quando precisar sobrescrever estilos inline.
Ferramentas relacionadas
Decodificador JWT
Decodifique um JSON Web Token para inspecionar cabeçalho, claims e expiração.
Gerador de UUID
Gere UUIDs v4 aleatórios em lote, com cópia.
Gerador de Hash (SHA)
Gere hashes SHA-1, SHA-256, SHA-384 e SHA-512 a partir de texto.
Codificador / Decodificador de URL
Codifique texto para URLs em porcentagem, ou decodifique URLs em texto.
Codificador / Decodificador Base64
Codifique texto em Base64 ou decodifique Base64 de volta em texto.
Formatador e Validador de JSON
Formate, embeleze, minifique e valide JSON no seu navegador.