Especificidade

Especificidade é a “pontuação” do seletor. No cartaz do Belavista, .titulo não perde para h1 à toa — e #capa esmaga os dois.

O exemplo deste capítulo é 25-especificidade, no pacote que acompanha o volume. Altere só o seletor (não o valor), preveja quem vence, recarregue e confira.

O que você vai aprender

• Contar IDs, classes/atributos/pseudo-classes e elementos.
• Comparar duas pontuações.
• Saber o que não conta (universal, combinadores).
• Lidar com estilo inline e !important sem abuso.
• Subir especificidade de forma pragmática.

Como se conta

Pense em três colunas (simplificação didática):

1. Quantos IDs.
2. Quantas classes, atributos e pseudo-classes.
3. Quantos elementos e pseudo-elementos.

* e combinadores (>, +, ~, espaço) não somam. :where() zera a contribuição dos seletores internos; :is() e :has() usam o argumento mais específico.

/* 0,0,1 — um elemento */
h1 { color: #1a1a1a; }

/* 0,1,0 — uma classe */
.titulo { color: #8b1e1e; }

/* 1,0,0 — um id */
#capa { color: navy; }

#capa vence .titulo, que vence h1.

Comparar

Compare da esquerda para a direita. Quem tem mais IDs ganha. Empate de IDs: mais classes. Empate: mais elementos. Empate total: cascata (ordem).

nav a { /* 0,0,2 */ }
.menu a { /* 0,1,1 — ganha de nav a */ }

Inline e !important

style="color: green" no HTML pesa como estilo inline (acima de IDs, abaixo de !important de autor em muitos casos práticos). !important muda o degrau de importância na cascata — não “aumenta a pontuação” do seletor.

Subir sem bagunçar

Em vez de #id, prefira uma classe extra ou um contexto curto:

.folha .titulo {
  color: #8b1e1e;
}

Evite encadear dez classes só para “ganhar”. Isso trava o HTML. Outro caminho limpo: uma classe utilitária no próprio elemento (.titulo-marca) em vez de .main .folha article h1.titulo.

Nas DevTools, a regra vencedora aparece sem risco; as perdedoras ficam riscadas. Se a sua regra nem aparece, o seletor não casou — suba clareza, não pontuação.

Erro comum: achar que a ordem no arquivo sempre manda. Se as especificidades diferem, a ordem só decide no empate.

Critério para avançar

Você avança se: calcula 0,1,1 versus 0,0,2; explica por que o id “trava”; resolve um conflito trocando seletor, não inventando !important.

Atividades

1. Qual seletor é mais específico: .card p ou article p.destaque?
2. * aumenta especificidade?
3. Duas regras com a mesma pontuação: quem decide?

Respostas comentadas

1. article p.destaque → 0,1,2 (classe + dois elementos). .card p → 0,1,1. Ganha o primeiro.
2. Não. O universal não soma nas colunas.
3. A cascata pela ordem de aparição (e demais critérios já empatados).