# Calculadora de especificidade CSS

> Cole um ou mais seletores CSS, ou uma folha de estilos inteira, e leia a especificidade de cada seletor como a tripla (A, B, C) do Selectors Level 4, cada seletor simples nomeado com a coluna a que soma, os seletores ordenados como a cascata os ordena com os empates apontados, e os casos especiais explicados: :where() não conta nada, :is(), :not() e :has() tomam o argumento mais específico, :nth-child(of) soma o seu argumento, o seletor universal não soma nada, uma classe repetida conta duas vezes, um pseudoelemento legado de dois-pontos simples conta como um. Com o lembrete das cinco coisas que a cascata verifica antes da especificidade.

- Tool: https://ronutz.com/pt-BR/tools/css-specificity-calculator
- Family: Web e HTTP

---

## O que faz

Lê um ou mais seletores CSS (um por linha, separados por vírgula, ou uma folha de estilos inteira colada, cujos blocos de declaração e preâmbulos de at-rules são descartados) e calcula a especificidade de cada seletor como a tripla (A, B, C) do Selectors Level 4, com cada seletor simples nomeado e a coluna a que soma. Os seletores são ordenados como a cascata os ordena, os empates são apontados (ali decide a ordem de aparição), e cada regra especial de que o seletor dependeu é explicada ao lado dele.

## A contagem

Do Selectors Level 4, "Calculating a selector's specificity":

- **A** conta seletores de ID (`#main`).
- **B** conta seletores de classe (`.nav`), seletores de atributo (`[type="text"]`) e pseudoclasses (`:hover`).
- **C** conta seletores de tipo (`li`) e pseudoelementos (`::before`).
- O seletor universal (`*`) é ignorado; combinadores não somam nada.
- As especificidades se comparam coluna a coluna: A maior vence; se A empata, B maior; se B empata, C maior; se tudo empata, as especificidades são iguais.
- "Repeated occurrences of the same simple selector are allowed and do increase specificity": `.a.a` é (0,2,0).

Os casos especiais que a especificação explicita, e que a calculadora aplica:

- `:is()`, `:not()` e `:has()`: a especificidade "is replaced by the specificity of the most specific complex selector in its selector list argument". `:not(em, strong#foo)` é (1,0,1).
- `:nth-child()` e `:nth-last-child()` com cláusula `of`: uma pseudoclasse "plus the specificity of the most specific complex selector in its selector list argument". `:nth-child(even of li, .item)` é (0,2,0).
- `:where()`: "replaced by zero". `.qux:where(em, #foo#bar#baz)` é (0,1,0).
- Os pseudoelementos legados de dois-pontos simples do CSS2 (`:before`, `:after`, `:first-line`, `:first-letter`) são pseudoelementos e contam em C.
- Do CSS Shadow Module Level 1: `:host` é uma pseudoclasse; `:host()` e `:host-context()` são uma pseudoclasse mais o argumento; `::slotted()` é um pseudoelemento mais o argumento. `::part()` é contado como um pseudoelemento (o módulo remete a regra exata ao CSS Pseudo-Elements Level 4; a suposição aparece na página).

A calculadora reproduz a tabela de exemplos da especificação: `*` (0,0,0), `LI` (0,0,1), `UL LI` (0,0,2), `UL OL+LI` (0,0,3), `H1 + *[REL=up]` (0,1,1), `UL OL LI.red` (0,1,3), `LI.red.level` (0,2,1), `#x34y` (1,0,0), `#s12:not(FOO)` (1,0,1), `.foo :is(.bar, #baz)` (1,1,0).

## Antes da especificidade

A especificidade só decide quando tudo acima dela na cascata está empatado. O CSS Cascading and Inheritance Level 5 ordena as declarações por, em ordem decrescente de prioridade: origem e importância (uma declaração `!important` do autor vence qualquer declaração normal, seja qual for o seletor), contexto (shadow trees), estilos ligados ao elemento (um atributo `style` vence qualquer regra da mesma importância), camadas de cascata (a última camada vence para declarações normais, a primeira para as importantes), depois especificidade, depois ordem de aparição (vence a última declaração na ordem do documento, com os atributos style colocados depois de todas as folhas de estilo). A página lista esses passos para que um vencedor surpreendente possa ser rastreado ao passo certo.

## Limites

- A calculadora lê sintaxe, não um documento. Não sabe se um seletor casa com algo, e para uma lista de seletores a especificidade em vigor num casamento real é a do membro mais específico que casa; a página ordena os membros individualmente.
- Prefixos de namespace (`ns|p`) são lidos, não resolvidos.
- Pseudoclasses e pseudoelementos desconhecidos são contados pela forma (um dois-pontos B, dois C), que é o que a gramática diz; se um navegador os suporta é outra questão.
- Implementações podem limitar contagens muito grandes; a calculadora não limita.

## Fontes

- [Selectors Level 4, W3C Working Draft 22 January 2026: Calculating a selector's specificity](https://www.w3.org/TR/selectors-4/#specificity-rules) (lido em 2026-10-05)
- [CSS Cascading and Inheritance Level 5, W3C Candidate Recommendation Snapshot 13 January 2022: Cascade Sorting Order](https://www.w3.org/TR/css-cascade-5/#cascade-sort) (lido em 2026-10-05)
- [CSS Shadow Module Level 1, Editor's Draft 28 April 2026](https://drafts.csswg.org/css-shadow-1/) (lido em 2026-10-05)

## Standards and references

- [Selectors Level 4, W3C Working Draft 22 January 2026: Calculating a selector's specificity](https://www.w3.org/TR/selectors-4/#specificity-rules) - A counts ID selectors, B class, attribute and pseudo-class selectors, C type selectors and pseudo-elements, the universal selector ignored; :is(), :not() and :has() take the most specific argument; :nth-child() and :nth-last-child() count as one pseudo-class plus their argument; :where() is zero; comparison column by column; repeated occurrences increase specificity; the examples table
- [CSS Cascading and Inheritance Level 5, W3C Candidate Recommendation Snapshot 13 January 2022: 6.1 Cascade Sorting Order](https://www.w3.org/TR/css-cascade-5/#cascade-sort) - origin and importance, context, element-attached styles, cascade layers, specificity, order of appearance, in descending order of priority; each declaration has the specificity of its style rule
- [CSS Shadow Module Level 1, Editor's Draft 28 April 2026: the specificity of :host, :host(), :host-context() and ::slotted()](https://drafts.csswg.org/css-shadow-1/) - :host is a pseudo-class; :host() and :host-context() are a pseudo-class plus the argument; ::slotted() is a pseudo-element plus the argument; ::part() deferred to CSS Pseudo-Elements Level 4

## Related reading

- [Como o parser de HTML repara a sua marcação, e por que os reparos são iguais em todos os navegadores](https://ronutz.com/pt-BR/learn/how-the-html-parser-repairs-your-markup.md): Um navegador nunca rejeita HTML. Seja o que for que você cole, uma árvore sai, e o HTML Standard diz exatamente qual árvore: os elementos que o parser cria por você, as tags de fechamento que ele supre, os elementos de formatação que divide, o conteúdo que tira de dentro das tabelas, os comentários que faz dos seus erros de digitação, e o quirks mode em que cai sem um DOCTYPE. Os 52 erros de análise nomeados, os cinco reparos que vale conhecer pelo nome, em que view source e inspecionar elemento discordam, e por que a WCAG 2.2 pôde abandonar o seu critério de análise sem baixar a régua.
- [Como um seletor encontra os seus elementos: o Selectors Level 4 lido como um algoritmo de casamento](https://ronutz.com/pt-BR/learn/how-a-selector-finds-its-elements.md): Um seletor CSS é uma pergunta feita a uma árvore, e a especificação diz exatamente como a pergunta é respondida: composto por composto, da direita para a esquerda, com a linguagem do documento decidindo o que conta como o mesmo nome. Onde a caixa importa e onde não importa, os sete operadores de atributo e a string vazia que não casa com nada, como os irmãos são contados, o que :is(), :not(), :where() e :has() fazem com a validade e a especificidade, que pseudoclasses um documento estático nunca pode responder, e o que os navegadores fazem com um seletor que termina dentro de um colchete.
- [Especificidade, contada pela especificação, e as cinco coisas que a cascata verifica antes](https://ronutz.com/pt-BR/learn/css-specificity-and-the-cascade.md): Toda guerra de folhas de estilo acaba no mesmo lugar: duas regras querem a mesma propriedade no mesmo elemento e uma vence. O CSS decide com um procedimento curto e exato, e a especificidade é só o quinto passo. Aqui está como o Selectors Level 4 conta um seletor em três números, o que :is(), :where(), :not() e :nth-child(of) fazem com a conta, os dez exemplos que a própria especificação dá, e os cinco critérios que a cascata resolve antes de olhar para a especificidade.