Calculadora de especificidade CSS
Calcule e compare pontuações de especificidade de seletores CSS
Entrada e opções
Predefinições rápidas e exemplos
Roda no seu navegador. Os dados informados ficam neste dispositivo.
Resultados
Informe seus valores para ver o resultado.
Sobre a calculadora gratuita de especificidade CSS
A Calculadora de especificidade CSS é uma ferramenta gratuita que ajuda desenvolvedores web a entender, calcular e depurar a especificidade de seletores CSS. A especificidade é o algoritmo que os navegadores usam para determinar qual regra CSS tem prioridade quando várias regras atingem o mesmo elemento. Ela é expressa como um valor de três partes (a, b, c), em que cada componente representa uma categoria diferente de peso do seletor.
Entender a especificidade CSS é uma das habilidades mais importantes para desenvolvedores front-end. Quando os estilos não são aplicados como esperado, os conflitos de especificidade costumam ser a causa. Esta calculadora decompõe instantaneamente qualquer seletor CSS em seus componentes de especificidade, mostrando exatamente quantos seletores de ID (a), seletores de classe/atributo/pseudoclasse (b) e seletores de elemento/pseudoelemento (c) contribuem para o resultado final.
A ferramenta inclui um poderoso modo de comparação que permite colocar dois seletores lado a lado para ver qual vence na disputa de especificidade. Isso é valioso para depurar conflitos de CSS, refatorar folhas de estilo ou aprender como funciona a cascata. Gráficos de barras e detalhamentos com cores tornam a especificidade intuitiva e fácil de entender, até para quem está começando em CSS.
Principais recursos
- Cálculo instantâneo da especificidade de qualquer seletor CSS válido
- Gráfico de barras mostrando o peso relativo de IDs, classes e elementos
- Detalhamento colorido de cada componente do seletor (IDs em vermelho, classes em amarelo, elementos em azul)
- Modo de comparação para confrontar dois seletores, com indicadores de vencedor e perdedor
- Suporte a seletores complexos, incluindo pseudoclasses, pseudoelementos e seletores de atributo
- Tratamento correto das regras de especificidade das pseudoclasses :not(), :is() e :where()
- 14 exemplos prontos que cobrem padrões comuns de seletores para um aprendizado rápido
- Cópia dos valores de especificidade para a área de transferência com um clique
- Cartão de referência rápida das regras de especificidade integrado
- Suporte ao modo escuro para uso confortável em qualquer ambiente
Como usar a Calculadora de especificidade CSS
- Digite um seletor CSS: Digite ou cole qualquer seletor CSS no campo de entrada. A especificidade é calculada instantaneamente enquanto você digita.
- Confira o detalhamento: Analise o valor de especificidade (a, b, c), o gráfico de barras e o detalhamento colorido dos componentes para entender como o resultado é calculado.
- Experimente o modo de comparação: Mude para o modo de comparação para inserir dois seletores e ver qual tem maior especificidade, com indicadores claros de vencedor, perdedor ou empate.
- Use os exemplos prontos: Clique em qualquer um dos 14 seletores prontos para ver sua especificidade na hora. No modo de comparação, os exemplos preenchem o primeiro campo de seletor vazio.
- Copie o resultado: Clique no botão de copiar ao lado do valor de especificidade para copiá-lo para a área de transferência e usá-lo em documentação ou em comentários de código.
Casos de uso
- Depuração de conflitos de CSS: Descubra por que uma regra CSS sobrescreve outra comparando suas pontuações de especificidade e identificando o seletor vencedor.
- Refatoração de folhas de estilo: Analise a especificidade dos seletores em todo o seu código para reduzir seletores excessivamente específicos e melhorar a manutenção do CSS.
- Aprendizado da cascata CSS: Use os detalhamentos visuais e os exemplos prontos para desenvolver uma compreensão intuitiva de como a especificidade funciona na prática.
- Revisão de código: Verifique rapidamente a especificidade dos seletores durante as revisões de código para evitar guerras de especificidade e manter uma abordagem de estilo consistente.
- Ensino e workshops: Use o modo de comparação e os gráficos visuais como apoio didático em workshops de CSS, bootcamps e cursos online.
- Planejamento da arquitetura CSS: Planeje estratégias de seletores (BEM, OOCSS, utility-first) entendendo as implicações de especificidade antes de escrever o código.
- Personalização de frameworks: Calcule a especificidade ao sobrescrever estilos do Bootstrap, do Tailwind ou de outros frameworks, para garantir que suas regras personalizadas tenham prioridade.
Perguntas frequentes
Esta ferramenta é gratuita?
Sim, a Calculadora de especificidade CSS é totalmente gratuita. Não há limites de uso, não é preciso criar conta e não existem planos premium. Calcule e compare quantos seletores precisar.
Meus dados estão seguros?
Com certeza. Todos os cálculos de especificidade acontecem inteiramente no seu navegador. Nenhum seletor CSS nem outros dados são enviados a servidor algum. A ferramenta funciona totalmente offline depois de carregada.
Como funciona a especificidade CSS?
A especificidade CSS é calculada como um valor de três partes (a, b, c). A coluna "a" conta os seletores de ID (#id), a coluna "b" conta os seletores de classe (.class), os seletores de atributo ([attr]) e as pseudoclasses (:hover), e a coluna "c" conta os seletores de tipo (div, p) e os pseudoelementos (::before). Valores maiores nas colunas anteriores sempre vencem, independentemente das colunas seguintes.
E o !important e os estilos inline?
Estilos inline sobrescrevem toda a especificidade baseada em seletores, e !important sobrescreve tudo, inclusive estilos inline. Eles são tratados fora do sistema de especificidade (a, b, c) e não são calculados por esta ferramenta, pois não fazem parte da especificidade de seletores.
Como o :not() afeta a especificidade?
A pseudoclasse :not() em si não contribui com nenhuma especificidade, mas o argumento dela é contado normalmente. Por exemplo, :not(.active) adiciona (0, 1, 0), porque .active é um seletor de classe. Da mesma forma, :is() assume a especificidade do seu argumento mais específico, enquanto :where() sempre contribui com especificidade zero.
O que acontece quando dois seletores têm a mesma especificidade?
Quando dois seletores têm valores de especificidade idênticos, vale a regra da cascata do CSS: o seletor que aparece depois no código-fonte tem prioridade. O modo de comparação mostrará um indicador "TIE" (empate) nesse caso.
Dicas e boas práticas
- Mantenha a especificidade baixa: Prefira seletores de classe a seletores de ID para manter a especificidade sob controle e facilitar a sobrescrita dos estilos quando necessário.
- Evite !important: Usar !important é sinal de problemas de especificidade. Corrija a causa raiz ajustando a especificidade do seletor em vez de adicionar declarações !important.
- Use BEM ou uma nomenclatura semelhante: Metodologias como BEM (Block Element Modifier) ajudam a manter a especificidade plana, apoiando-se principalmente em seletores de classe única.
- Confira antes de aninhar: Seletores muito aninhados, como #main .content .sidebar .widget p, acumulam alta especificidade. Use esta calculadora para verificar antes de fazer o commit.
- Aproveite o :where() para especificidade zero: Ao escrever estilos utilitários ou resets, envolva os seletores em :where() para garantir que possam ser sobrescritos com facilidade.
- Compare durante a depuração: Quando um estilo não é aplicado, use o modo de comparação para verificar se outro seletor está vencendo a disputa de especificidade.