ronutz

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.

Documentação (Markdown)

Web e HTTP
Documentação
Experimente

10 seletores. O mais específico é .foo :is(.bar, #baz), com 1,1,0.

A especificidade de cada seletor

posiçãoseletorABCA,B,C
10*0000,0,0
9LI0010,0,1
8UL LI0020,0,2
7UL OL+LI0030,0,3
6H1 + *[REL=up]0110,1,1
5UL OL LI.red0130,1,3
4LI.red.level0210,2,1
3#x34y1001,0,0
2#s12:not(FOO)1011,0,1
1.foo :is(.bar, #baz)1101,1,0

A conta seletores de ID; B conta seletores de classe, de atributo e pseudoclasses; C conta seletores de tipo e pseudoelementos. O seletor universal não conta nada. As especificidades se comparam coluna a coluna, A primeiro (Selectors Level 4).

Peça por peça

  1. 1*0,0,0
    * 0
    • *: o seletor universal é ignorado na contagem (Selectors Level 4).
  2. 2LI0,0,1
    LI C
  3. 3UL LI0,0,2
    UL C(descendente)LI C
  4. 4UL OL+LI0,0,3
    UL C(descendente)OL C+LI C
  5. 5H1 + *[REL=up]0,1,1
    H1 C+* 0[REL=up] B
    • *: o seletor universal é ignorado na contagem (Selectors Level 4).
  6. 6UL OL LI.red0,1,3
    UL C(descendente)OL C(descendente)LI C.red B
  7. 7LI.red.level0,2,1
    LI C.red B.level B
  8. 8#x34y1,0,0
    #x34y A
  9. 9#s12:not(FOO)1,0,1
    #s12 A:not(FOO) C
    • :not(FOO): a especificidade de :not() é a do seletor mais específico da sua lista de argumentos; a negação não muda nada.
  10. 10.foo :is(.bar, #baz)1,1,0
    .foo B(descendente):is(.bar, #baz) A
    • :is(.bar, #baz): a especificidade de :is() é a do seletor mais específico da sua lista de argumentos.

O que a cascata verifica antes da especificidade

A especificidade só decide quando tudo acima dela está empatado. O CSS Cascading and Inheritance Level 5 ordena as declarações por estes critérios, em ordem decrescente de prioridade:

  1. Origem e importância: transições primeiro, depois declarações importantes do agente de usuário, importantes do usuário, importantes do autor, animações, normais do autor, normais do usuário, normais do agente de usuário. Uma declaração !important do autor vence qualquer declaração normal, seja qual for o seletor.
  2. Contexto: entre contextos de shadow tree, o contexto externo vence para declarações normais e o interno para as importantes.
  3. Estilos ligados ao elemento: um atributo style vence qualquer regra de estilo da mesma importância.
  4. Camadas de cascata: para declarações normais vence a última camada, para as importantes a primeira; declarações fora de qualquer camada ficam numa camada final implícita.
  5. Especificidade: a tripla comparada aqui. Cada declaração tem a especificidade do seletor da sua regra.
  6. 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 calculadora lê a sintaxe dos seletores, não um documento: não sabe se um seletor casa com algo, e uma lista de seletores é ordenada pelos seus membros, enquanto num casamento real a especificidade em vigor é a do membro mais específico que casa. Namespaces são lidos, não resolvidos. A contagem segue o Selectors Level 4 (Working Draft, 22 de janeiro de 2026) e a ordem da cascata segue o CSS Cascade Level 5; ambos citados em Fontes.

Endpoint da APIGEThttps://ronutz.com/api/v1/css-specificity-calculatorDocumentado, não servido. Abre a especificação.

Referências