# Calculadora de especificidade de seletores CSS

Calcula a especificidade de seletores CSS, compara prioridades e sugere como evitar conflitos

> Página canônica: https://elysiatools.com/pt/tools/css-selector-specificity-calculator

- **Categoria:** Development

- **Palavras-chave:** css, especificidade, seletor

## Visão geral

Insira um ou mais seletores CSS e a ferramenta calculara a especificidade (a, b, c), mostrara a prioridade e sugerira como reduzir conflitos.

## Entradas

- **Seletores** (textarea): .card .title #app .sidebar a:hover button.primary:is(:hover,:focus)

## Quando usar

- Ao depurar estilos que não estão sendo aplicados conforme o esperado em um elemento específico.
- Durante a refatoração de folhas de estilo complexas para reduzir a dependência de !important.
- Para comparar a prioridade entre múltiplos seletores antes de implementar mudanças em sistemas de design.

## Como funciona

- Insira um ou mais seletores CSS no campo de texto, separando-os por linha.
- A ferramenta analisa a estrutura de cada seletor para identificar IDs, classes, atributos, pseudoclasses e elementos.
- O sistema calcula a pontuação tripartida (a, b, c) baseada nas normas de especificidade da W3C.
- Um relatório comparativo é gerado, exibindo os pesos e sugerindo formas de evitar conflitos de sobreposição.

## Casos de uso

- Resolução de conflitos de estilo em componentes herdados de bibliotecas externas.
- Auditoria de CSS legado para simplificar a manutenção e melhorar a performance de renderização.
- Treinamento técnico para desenvolvedores sobre o funcionamento prático da cascata e herança CSS.

## Perguntas frequentes

### O que representa a pontuação (a, b, c)?

Representa o peso de IDs (a), classes, atributos e pseudoclasses (b), e elementos e pseudoelementos (c).

### Como a ferramenta calcula a pseudoclasse :is()?

A especificidade é calculada com base no argumento mais específico presente dentro da lista da pseudoclasse.

### Por que meu estilo não muda mesmo com maior especificidade?

Isso pode ocorrer devido à ordem de carregamento no CSS ou ao uso de regras com a flag !important.

### A ferramenta suporta seletores combinados?

Sim, ela processa seletores complexos que utilizam combinadores de descendência, filhos, irmãos e adjacentes.

### Como posso reduzir a especificidade de um seletor?

Recomenda-se substituir IDs por classes e remover seletores de elementos desnecessários da cadeia.

## Ferramentas relacionadas

- [Sincronizador de paleta Tailwind](https://elysiatools.com/pt/tools/tailwind-color-palette-sync): Insira HEX, escolha o esquema de nomes (escala 50–950 / nome único / aninhamento) e gere o fragmento theme.extend.colors do tailwind.config.ts com níveis WCAG AA/AAA. Dark mode opcional.
- [Simulador de jobs cron](https://elysiatools.com/pt/tools/cron-job-simulator): Simula as proximas execucoes de uma ou duas expressoes cron de 5 partes, destacando sobreposicoes e agendamentos densos.
- [Referência de Códigos de Status HTTP](https://elysiatools.com/pt/tools/http-status-reference): Referência completa de códigos de status HTTP (1xx–5xx) com semântica, cenários típicos e conselhos de repetição
- [Diff visual de breakpoints responsivos](https://elysiatools.com/pt/tools/responsive-breakpoint-diff): Renderiza uma URL em varias larguras e mostra capturas, mapas de calor e metricas de layout na pagina.
- [Gerador de layout masonry CSS](https://elysiatools.com/pt/tools/css-masonry-layout-generator): Gera layouts masonry em CSS puro com breakpoints, espacamento configuravel e seletores ignorados
- [Detector de quebra em diff OpenAPI](https://elysiatools.com/pt/tools/openapi-diff-breach-detector): Compara schemas OpenAPI ou GraphQL, marca breaking changes e gera um relatorio de impacto para equipes de API
- [Calculadora de Cashback](https://elysiatools.com/pt/tools/cash-back-calculator): Calculadora de cashback: insira categorias de gasto (nome, gasto mensal, % cashback) para calcular o cashback mensal e anual, a taxa efetiva e comparar com um cartão fixo, com gráfico.
- [Calculadora de Quitação de Cartões de Crédito](https://elysiatools.com/pt/tools/credit-card-payoff): Planejador de quitação de cartões: insira vários cartões (nome, saldo, APR, pag. mín %) e compare avalanche (APR alto) vs bola de neve (saldo baixo) em tempo, juros e economia, com curvas de saldo.

## Exemplos

- [Exemplos de Seletores CSS](https://elysiatools.com/pt/samples/css-selectors): Coleção de exemplos de seletores CSS para testes de extração e análise
- [Exemplos do Framework CSS Bulma](https://elysiatools.com/pt/samples/bulma): Exemplos do framework CSS Bulma incluindo colunas, componentes, controles de formulário, sistema de layout e padrões de design modernos baseados em CSS
- [Amostras CSS](https://elysiatools.com/pt/samples/css-viewer-samples): Arquivos de amostra para o visualizador CSS no navegador
- [Exemplos do Framework CSS Milligram](https://elysiatools.com/pt/samples/milligram): Exemplos do framework CSS Milligram incluindo tipografia, formulários, grids e componentes

## Conteúdo relacionado

- [Criação de CSS, layout e cascata](https://elysiatools.com/pt/hubs/css-authoring-layout-and-cascade-workflows): Crie e revise CSS com formatação, diagnóstico de seletores, trechos responsivos, efeitos visuais e verificações renderizadas.