Calculadora de Especificidade CSS
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
Testador de seletores CSS
Teste um seletor CSS contra seu HTML e veja exatamente quais elementos correspondem, no seu navegador.
Detector de Caracteres Invisíveis / Zero-Width
Detecte NBSPs, caracteres zero-width, marcas bidi e tabs em texto colado — e limpe-os.
Playground de CSS Flexbox
Escolha visualmente flex-direction, justify-content, align-items e gap — copie o CSS ou a classe Tailwind.
Minificador HTML / CSS / JS
Tire espaços e comentários de HTML, CSS ou JavaScript — veja o tamanho economizado e copie o resultado.
Playground de CSS Grid
Escolha visualmente grid-template-columns / rows, gap e alinhamento — copie o CSS para o projeto.
Conversor de CSS para objeto de estilo JS
Converta um bloco de declarações CSS em um objeto de estilo inline React/JS, no seu navegador.