Calculadora de especificidade CSS
Seletores CSS
Resumo
Seletores
0
Mais forte
0-0-0
Status
Inativo
A especificidade é mostrada como A-B-C: IDs, classes/atributos/pseudo-classes e elementos/pseudo-elementos.
Resultados de especificidade
Analise seletores para ver as pontuações de especificidade.
Sobre a calculadora de especificidade CSS
A especificidade CSS decide qual seletor vence quando várias regras miram o mesmo elemento. Esta calculadora mostra a pontuação A-B-C de cada seletor.
Ela conta IDs, classes, atributos, pseudo-classes, elementos e pseudo-elementos, incluindo funções comuns como :is(), :not(), :has() e :where().
Como usar esta ferramenta
- Cole um seletor por linha, uma lista separada por vírgulas ou regras CSS completas.
- Clique em Analisar para calcular a especificidade de cada seletor.
- Compare as pontuações A-B-C e veja qual seletor é mais forte.
Dicas
- Evite IDs desnecessários quando quiser CSS fácil de sobrescrever.
- :where() sempre tem especificidade zero, útil para estilos padrão de baixa prioridade.
- Quando seletores têm a mesma especificidade, normalmente vence a regra que aparece depois.
Ferramentas relacionadas
Você também pode achar essas ferramentas úteis.
Minificador / embelezador CSS
Minimize o CSS para reduzir o tamanho do arquivo ou embeleze o CSS compactado para facilitar a leitura.
Utilitários Diversos
›
Gerador de CSS Clamp
Gere valores CSS `clamp()` para tipografia fluida, espaçamento, gaps e dimensionamento responsivo.
Utilitários Diversos
›
Gerador de grade CSS
Crie layouts de grade CSS com colunas, linhas, lacunas, alinhamento, visualização ao vivo e CSS pronto para cópia.
Utilitários Diversos
›
Gerador de Flexbox CSS
Crie layouts Flexbox com preview em tempo real, controles de alinhamento, quebra de linha, direção, gap e CSS pronto para copiar.
Utilitários Diversos
›
Conversor de unidades CSS
Converta unidades CSS como px, rem, em, %, vw e vh com tamanho de fonte base, tamanho pai e configurações de janela de visualização.
Utilitários Diversos
›
Perguntas frequentes sobre especificidade CSS
O que significa A-B-C?
A são seletores ID, B são classes, atributos e pseudo-classes, e C são elementos e pseudo-elementos.
Estilo inline conta aqui?
Esta ferramenta calcula especificidade de seletores. Estilos inline ficam fora disso e geralmente são mais fortes.
Como :where() afeta a especificidade?
:where() contribui com especificidade zero, mesmo quando seus argumentos contêm IDs ou classes.
Posso colar regras CSS completas?
Sim. A ferramenta extrai os seletores antes das chaves de abertura e os analisa.