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.
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.
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.