./prontouso.com

UTILITÁRIOS DE DESIGN

Calculadora de Especificidade CSS

Informe um ou dois seletores CSS para ver sua especificidade, mostrada como ids-classes-tipos, e qual venceria em um conflito.

Status da ferramentaRoda no seu navegador
Prévia

Entradas

Resultados

Seletor A
1-1-1
Seletor B (opcional, para comparar)
0-1-4

A vence

Como funciona

  1. Informe os dados

    Preencha os valores, cole o texto ou envie o arquivo que esta ferramenta usa.

  2. Veja o resultado na hora

    A maioria das ferramentas atualiza enquanto você digita; algumas usam um único botão. De qualquer forma, o resultado aparece aqui mesmo.

  3. Use o resultado

    Copie, baixe ou compartilhe o que a ferramenta gerar — o controle é sempre seu.

Privacidade e processamento — Roda localmente no seu navegador. Esta ferramenta não faz upload da sua entrada.

O que é Calculadora de Especificidade CSS?

A Calculadora de Especificidade CSS é uma ferramenta para medir a força de seletores CSS e comparar qual regra venceria quando estilos entram em conflito.

ENTENDA A FERRAMENTA

Como a especificidade CSS é calculada

Use este guia para ler a pontuação ids-classes-tipos e entender por que uma regra vence outra em conflitos CSS.

Como é calculado

IDs contam mais, depois classes, seletores de atributo e pseudo-classes, depois seletores de tipo de elemento e pseudo-elementos. Combinadores como espaço, > e ~ não afetam a especificidade.

Limitações

  • `:not()`, `:is()` e `:has()` são contados cada um como uma pseudo-classe, sem olhar dentro do argumento.
  • `:where()` sempre conta como zero, seguindo a especificação CSS.

Exemplo prático

`#main .container p` tem especificidade 1 id, 1 classe, 1 tipo (1-1-1), enquanto `nav ul li.active a` tem 0 ids, 1 classe, 4 tipos (0-1-4) — o primeiro seletor vence apesar de corresponder a menos elementos pelo nome.

Exemplo de especificidade

Peso
IDs - classes/atributos/pseudo-classes - tipos/pseudo-elementos

#app .card button:hover

Um ID, duas partes no nível de classe e um seletor de tipo dão 1-2-1.

Notas de cálculo

Todo o cálculo roda no seu navegador; os seletores informados nunca são enviados a lugar nenhum.

Perguntas frequentes

Por que uma regra posterior às vezes vence mesmo com especificidade igual?

Quando a especificidade empata, a regra que aparece depois na folha de estilo (ou tem prioridade de camada CSS maior) vence.

O estilo inline aparece aqui?

Não — atributos `style` inline sempre superam qualquer especificidade baseada em seletor, independentemente do que esta calculadora mostra.

A especificidade depende da ordem das partes em um seletor?

Não — apenas quais tipos de seletores aparecem e quantos de cada, não a ordem em que são escritos.

Ele interpreta completamente :is(), :not() e :has()?

Não. Esta implementação conta cada um como uma pseudo-classe, exceto :where(), que vale zero. A especificação completa olha os argumentos internos.

Ferramentas relacionadas