Carregando...

Especificidade CSS

Você já sabe escrever seletores. Em folhas reais as regras colidem: duas regras miram o mesmo elemento e a mesma propriedade. O navegador não chuta — usa a especificidade e, em empate, a ordem no arquivo.

O que significa especificidade?

Especificidade é um peso que o navegador dá a um seletor. Em conflito, o seletor mais pesado vence nessa propriedade. No dia a dia, memorize esta escada: style inline > id > class (e atributo / pseudo-classe) > element (e pseudo-elemento). O * e os combinadores sozinhos não somam peso.

Ranking em um olhar

Aprenda esta ordem primeiro. Há mais detalhes, mas a maioria das confusões de iniciante se resolve com esta escada.

📊 Ranking de especificidade CSS (cotidiano)

Tipo Exemplos Costuma vencer
Style inline style="color: red" Quase tudo na folha
Id #hero, #nav Classes e elementos
Class / atributo / pseudo-classe .card, [type="email"], :hover Seletores de elemento
Element / pseudo-elemento p, h1, ::before Só regras mais fracas ou iguais (depois ordem de origem)

class vence element

Um seletor de tipo é amplo. Uma class é mais precisa — a cor da class vence. A ordem só importa quando os pesos são iguais.

class vence sobre element

css
CSS Code 
p {
color: #334155;
}

.note {
color: #0f766e;
}

Como ler o conflito

Para <p class="note"> as duas regras batem. .note é class; p é element. Class vence → texto teal.

id vence class

Um id pesa mais que uma class. Para design reutilizável prefira class; guarde id para um gancho único.

id vence sobre class

css
CSS Code 
.note {
color: #0f766e;
}

#title {
color: #9f1239;
}

Por que importa

Se <h1 id="title" class="note"> fica grená, o id venceu — não por «se sentir importante», e sim por peso maior.

Mesmo peso → a regra seguinte vence

Quando duas regras têm a mesma especificidade, vence a que aparece mais tarde no CSS para essa propriedade.

Mesmo peso — a ordem de origem decide

css
CSS Code 
.card {
border-color: #cbd5e1;
}

.card {
border-color: #0f766e;
}

Hábito no empate

Os dois seletores são uma class. A segunda regra .card vence → borda teal. Se queria a primeira cor, confira se um seletor mais forte também não casa.

Seletores combinados na prática

Seletores se combinam: nav a.button:hover é mais forte que um a sozinho porque acrescenta class e pseudo-classe. Não precisa de calculadora em cada linha — pergunte: «Tem id? Class extra? Ou só tags?»

Seletor combinado vence element nu

css
CSS Code 
a {
color: #334155;
}

nav a.button {
color: #0f766e;
}

Sobre !important

!important pode furar a especificidade normal. Extintor, não ferramenta diária. Abusar dificulta mudanças depois. Corrija primeiro estrutura e seletores mais claros.

Bons hábitos

  • Para aparência class; id para gancho único
  • Travou? Veja em qual degrau da escada cada seletor está
  • Mesmo peso → olhe a regra mais abaixo no arquivo
  • Não empilhe cadeias longas só para «vencer» — quebram quando o HTML muda
  • Deixe !important por último, não por primeiro

Experimente você

  1. Página com <p class="note">Olá</p>, <h1 id="title" class="note">Título</h1> e <a class="button">Ir</a> dentro de <nav>.
  2. Coloque o par element vs class (p cinza, .note teal) — o parágrafo note fica teal.
  3. Adicione #title { color: #9f1239; } — o título fica grená apesar de .note.
  4. Escreva duas regras .card de border-color — a segunda vence.
  5. Opcional: compare a { … } com nav a.button { … } num link do nav.

Erros comuns

  • Achar que «mais declarações» sobem a especificidade — não
  • Assumir que o último arquivo sempre vence um id — peso maior ainda vence
  • Usar #tudo ou !important como conserto padrão
  • Misturar degraus (tratar class como element)
  • Esquecer que empate volta à ordem de origem

Resumo

  • Especificidade decide conflitos na mesma propriedade
  • Escada cotidiana: inline > id > class/atributo/pseudo-classe > element/pseudo-elemento
  • Mesmo peso → regra seguinte
  • Para aparência, class; id e !important raros
  • Leia primeiro o degrau, depois a ordem
  • Pratique com p / .note / #title até o vencedor ficar óbvio

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
7
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 1 de 1
Css Tutorial