Categoria: Desenvolvimento
Calculadora de Especificidade CSS
Compare a especificidade de seletores como uma pontuação A-B-C
Digite um ou mais seletores CSS para calcular a especificidade deles como uma pontuação ID-classe-elemento (A-B-C), ordenada para que você veja qual regra venceria. Funciona inteiramente no seu navegador.
| Seletor | Especificidade (A-B-C) | IDs | Classes, atributos, pseudoclasses | Elementos, pseudoelementos |
|---|---|---|---|---|
#nav .item > a:hover | 1-2-1 | 1 | 2 | 1 |
.card.featured | 0-2-0 | 0 | 2 | 0 |
button | 0-0-1 | 0 | 0 | 1 |
* | 0-0-0 | 0 | 0 | 0 |
Tudo nesta página é processado no seu navegador. Nada é enviado.
Para que serve
Quando duas regras CSS têm como alvo o mesmo elemento, vence a de maior especificidade, não a que foi escrita por último. A especificidade é contada como três números: A para seletores de ID, B para classes, seletores de atributo e pseudoclasses, e C para seletores de elemento e pseudoelementos. Esta ferramenta analisa cada seletor que você digita, incluindo :not(), :is(), :has() e o :where(), que tem especificidade zero, e mostra sua pontuação A-B-C para que você compare seletores diretamente em vez de adivinhar.
Como usar
- Digite um seletor por linha, como #nav .item > a:hover.
- Leia a pontuação de especificidade A-B-C de cada seletor.
- Ordene por especificidade para ver qual seletor venceria um conflito.
Privacidade
Esta ferramenta roda inteiramente no seu navegador. O que você digita nunca é enviado, salvo ou compartilhado — fechar a aba já remove tudo.
Perguntas frequentes
- Meu CSS é enviado a algum lugar?
- Não. A análise acontece em JavaScript executado na página, então seletores de uma folha de estilos privada nunca saem do seu dispositivo.
- Como :not(), :is() ou :has() são pontuados?
- Eles contribuem com a especificidade do argumento mais específico, conforme a especificação do CSS, enquanto :where() sempre contribui com zero, independentemente do que está dentro dele.
- Estilo inline ou !important afetam essa pontuação?
- Não. Esta ferramenta pontua apenas seletores. Um atributo de estilo inline e !important substituem a especificidade normal por completo, em vez de somar à contagem A-B-C.