🎯Dev

Calculadora de Especificidade CSS

Calcule a especificidade (a, b, c) de um seletor CSS — IDs, classes/atributos/pseudo-classes, elementos. Útil para entender por que sua regra não está aplicando. Tudo no navegador.

IDs (a)

—

classes/atributos/pseudo (b)

—

elementos (c)

—

Score (a, b, c)

—

Calcule a especificidade de um seletor CSS

Sua regra CSS não pega? Na maioria das vezes a culpa é da especificidade. Trata-se do sistema de pontos que define qual seletor ganha quando dois disputam o mesmo elemento. Aqui você cola um seletor e recebe a especificidade dele calculada de forma clara.

O valor aparece dividido nos três níveis que pesam: IDs primeiro, depois classes, atributos e pseudo-classes, e no fim elementos e pseudo-elementos. Com essa decomposição na frente, fica óbvio por que um #id derruba dez classes, ou por que sua regra anda sendo sobrescrita. No fim das contas, escrever um CSS mais previsível vem mais fácil.

Como o cálculo acontece dentro do seu navegador, basta colar o seletor para entender o peso dele. Boa companhia na hora de caçar conflitos de estilo.

Perguntas frequentes

O que significam os três números do resultado?

São as três colunas da especificidade, na ordem a, b, c. A primeira conta IDs, a segunda conta classes, atributos e pseudo-classes, e a terceira conta elementos e pseudo-elementos. O seletor que já vem no campo, #main .nav li:hover, dá (1, 2, 1): um ID, dois na coluna do meio (.nav e :hover) e um elemento (li). A comparação é feita coluna por coluna, da esquerda para a direita, e por isso (1, 0, 0) ganha de (0, 9, 9) sem que nada transborde de uma coluna para a outra.

Por que :not() e :is() não somam nada aqui?

Porque a ferramenta remove esses grupos inteiros antes de contar, e a pontuação sai menor que a real. Pela especificação, :is(), :not() e :has() assumem a especificidade do argumento mais forte que carregam, então div:not(#id) vale (1, 0, 1) e a página mostra (0, 0, 1). Só :where() é mesmo zero, e nesse caso a conta bate. Quando o seletor investigado tiver um ID ou uma classe dentro de :not(), some a diferença na mão.

Posso colar uma lista de seletores separada por vírgula?

Pode colar, mas o número sai errado: a ferramenta trata a string inteira como um seletor só e soma as partes. "h1, h2" devolve (0, 0, 2) quando cada um vale (0, 0, 1) por conta própria, já que numa lista cada seletor carrega a sua especificidade e o navegador avalia um de cada vez. Cole um por vez. Vale lembrar também do que fica fora da conta: !important e style inline no elemento não entram na pontuação e vencem qualquer valor calculado aqui.

Ferramentas Relacionadas

Conversor PX ↔ REM / EM

Converta pixels para REM e EM e vice-versa com base configurável. Tabela de referência com os tamanhos mais usados em CSS. Essencial para web.

📐

Conversor de Unidades CSS

Converta entre px, em, rem, %, pt, vh, vw para valores comuns de design — base 16 px configurável. Tudo no navegador.

🎨

Gerador de Mesh Gradient

Crie mesh gradients modernos combinando vários radial-gradients. Adicione, remova e arraste pontos para compor fundos vibrantes ao estilo Stripe e Linear. Tudo no navegador.

🌬️

Gerador Tailwind Config (CLI)

Gere um tailwind.config.js pronto para usar com a Tailwind CLI, com paths de conteúdo e tema configurados. Copie e comece a estilizar em segundos.

🟢

Gerador de Neumorphism CSS

Crie efeitos Soft UI (neumorphism) com dois box-shadows complementares. Ajuste cor de base, distância, blur e tipo (extrudido, plano, pressionado). Cópia em CSS pronto. Tudo no navegador.

🌈

Gerador de Gradiente CSS

Crie gradientes lineares e radiais para CSS com prévia em tempo real. Ajuste cores, posições e ângulo. Copie o código CSS com um clique.