Especificidade, herança e cascata

Quando você cria um site, escreve muitas regras CSS. Às vezes, duas regras tentam estilizar o mesmo elemento HTML de formas diferentes.

Por exemplo, uma regra pode deixar todos os parágrafos cinza, enquanto outra deixa um parágrafo especial vermelho. O navegador precisa de uma forma clara de decidir qual regra vence.

Esse sistema de decisão é baseado na cascata, especificidade, herança e ordem das regras.

O que a cascata significa

A cascata é o sistema que o navegador usa para decidir qual regra CSS será aplicada quando houver conflitos.

O navegador olha para todas as regras correspondentes e faz perguntas como:

• Uma regra está marcada como mais importante?
• Um seletor é mais específico?
• Se as regras são iguais, qual vem depois?

<p class="intro">Bem-vindo ao meu site!</p>

<style>
  p {
    color: blue;
  }

  .intro {
    color: green;
  }
</style>

O parágrafo fica verde porque .intro é mais específico que p.

A cascata permite escrever estilos gerais primeiro e depois estilos mais específicos apenas onde você precisa.

Ordem das regras: regras posteriores podem vencer

Se duas regras CSS normais têm a mesma força e apontam para o mesmo elemento, a regra escrita depois vence.

<button class="button">Clique aqui</button>

<style>
  .button {
    background-color: blue;
    color: white;
  }

  .button {
    background-color: red;
  }
</style>

O botão fica vermelho porque a segunda regra .button vem depois.

Isso é útil quando você carrega seu próprio CSS depois da folha de estilos de uma biblioteca. Se seu seletor tiver a mesma força, sua regra posterior pode vencer.

Se um estilo não aparece na tela, verifique se outra regra mais abaixo no arquivo está sobrescrevendo seu estilo.

Especificidade: alguns seletores são mais fortes

Especificidade é o peso de um seletor. Um seletor mais específico geralmente vence um seletor menos específico, mesmo que o menos específico apareça depois.

<h2 id="main-title" class="title">Meu artigo</h2>

<style>
  #main-title {
    color: blue;
  }

  .title {
    color: orange;
  }
</style>

O título fica azul porque um seletor de ID é mais forte que um seletor de classe.

Tente manter seus seletores simples. Seletores muito fortes podem ficar difíceis de sobrescrever depois.

Uma escala simples de especificidade

Você não precisa memorizar contas complexas. Para iniciantes, esta escala simples é suficiente:

• Seletores de elemento, como p, h1 e button, são os mais fracos.
• Seletores de classe, como .card e .nav-link, são mais fortes.
• Seletores de ID, como #header, são mais fortes que classes.
• Estilos inline escritos no HTML com style="" são mais fortes que regras normais de uma folha CSS.

<div id="hero" class="banner">Olá</div>

<style>
  #hero {
    background-color: yellow;
  }

  .banner {
    background-color: blue;
  }
</style>

O fundo fica amarelo porque #hero é mais forte que .banner.

Use seletores de elemento para padrões básicos. Use seletores de classe para estilos reutilizáveis. Use seletores de ID raramente para estilização, porque eles são difíceis de sobrescrever.

Evite estilos inline para o estilo normal da página. Eles são úteis em casos especiais, mas deixam o CSS mais difícil de manter.

Herança: alguns estilos passam adiante

Herança significa que um elemento pai pode passar algumas propriedades CSS para seus filhos.

Propriedades relacionadas a texto geralmente são herdadas. Exemplos incluem color, font-family e às vezes font-size.

<div class="card">
  <h2>Bem-vindo</h2>
  <p>Este é um dia <em>ótimo</em>.</p>
</div>

<style>
  .card {
    color: blue;
    font-family: Arial, sans-serif;
  }
</style>

O título, o parágrafo e o texto em usam texto azul e a fonte Arial porque herdam esses estilos de .card.

Um uso comum é definir a fonte principal no elemento body.

Assim, a maior parte do texto da página usa essa fonte sem repetir a regra em todos os lugares.

Quando a herança pode confundir iniciantes

Nem toda propriedade CSS é herdada.

Propriedades de texto geralmente são herdadas. Propriedades de layout e caixa geralmente não são.

<div class="message">
  <p>Este parágrafo está dentro da caixa.</p>
</div>

<style>
  .message {
    border: 1px solid black;
    color: blue;
  }
</style>

O texto do parágrafo fica azul porque color é herdado.

Mas o parágrafo não recebe sua própria borda. A borda pertence apenas a .message.

Isso é bom. Se bordas fossem herdadas, cada elemento aninhado desenharia sua própria borda e a página ficaria confusa rapidamente.

Exemplo de regras em conflito

Aqui está um conflito direto em que duas regras apontam para o mesmo link.

<a href="#" id="special-link" class="nav-link">Início</a>

<style>
  .nav-link {
    color: green;
  }

  #special-link {
    color: deeppink;
  }
</style>

O link fica rosa porque #special-link é um seletor de ID.

A regra .nav-link é válida, mas um seletor de classe é mais fraco que um seletor de ID.

O que !important faz

!important é uma palavra-chave especial que faz uma declaração passar na frente de declarações normais.

<p id="unique-text" class="text">Leia isto.</p>

<style>
  p.text {
    color: red !important;
  }

  #unique-text {
    color: blue;
  }
</style>

O parágrafo fica vermelho porque a declaração vermelha usa !important.

Sem !important, o seletor de ID venceria.

Quando não usar !important

Não use !important só porque seu CSS não está funcionando.

Ele pode corrigir a tela por um momento, mas muitas vezes cria um problema mais difícil depois. Se você precisar sobrescrever essa regra novamente, talvez sinta que precisa adicionar outro !important.

Antes de usar, verifique:

• Existe outro seletor mais específico?
• Existe outra regra escrita depois?
• Você pode usar uma classe mais clara?
• Você pode remover um seletor de ID desnecessário?

Quando !important pode ser aceitável

Há casos raros em que !important pode ser razoável.

Um exemplo é uma pequena classe utilitária que sempre precisa fazer uma única coisa:

Outro exemplo é sobrescrever estilos de terceiros que você não pode editar.

Mesmo assim, use !important com cuidado e mantenha-o isolado.

Erros comuns de iniciantes

• Achar que a ordem das regras sempre vence. Em regras normais, a especificidade é verificada antes da ordem.
• Adicionar !important rápido demais em vez de encontrar o conflito real.
• Usar seletores pesados como #main-nav ul li a.active para estilos simples.
• Esperar que toda propriedade seja herdada. Bordas, margens, padding e fundos geralmente não são herdados.
• Usar seletores de ID para estilos reutilizáveis. Classes geralmente são mais fáceis de manter.

Mini tarefa

Veja este HTML e CSS:

<h3 class="heading" style="color: blue;">Notícias</h3>

<style>
  h3.heading {
    color: orange;
  }

  .heading {
    color: green;
  }
</style>

Qual será a cor do h3 na tela?

Resposta: ele ficará azul porque o estilo inline é mais forte que regras normais da folha CSS.

Quiz rápido

Pergunta 1: Qual seletor é mais forte: uma classe ou um ID?

Resposta: Um seletor de ID é mais forte que um seletor de classe.

Pergunta 2: Se dois seletores de classe apontam para o mesmo elemento e definem cores diferentes, qual vence?

Resposta: Se os dois seletores têm a mesma força, vence o que foi escrito depois.

Pergunta 3: A propriedade border é herdada automaticamente de um pai para um filho?

Resposta: Não. Bordas não são herdadas por padrão.

Pequeno desafio

Este parágrafo deveria ter fundo vermelho, mas agora está verde. Faça a regra .alert ser mais forte que #content p sem usar !important.

<div id="content">
  <p class="alert">Aviso: salve seu trabalho!</p>
</div>

<style>
  #content p {
    background-color: green;
  }

  /* Corrija este seletor */
  .alert {
    background-color: red;
  }
</style>

Uma resposta possível:

Isso vence porque combina um seletor de ID com um seletor de classe, tornando-o mais específico que #content p.

Resumo

• A cascata é como o navegador decide qual regra CSS vence.
• A ordem das regras importa quando regras correspondentes têm a mesma força.
• Especificidade é o peso de um seletor.
• Seletores de ID são mais fortes que seletores de classe, e seletores de classe são mais fortes que seletores de elemento.
• A herança passa alguns estilos de texto de pais para filhos.
• !important força uma declaração a passar na frente de regras normais, mas deve ser evitado na maior parte do tempo.