Pular para o conteúdo
~/.primo-academy.sh
☰ Aulas · CSS · 0/36
Recomendado: essencial

Cascata e Herança: Quem Ganha?

2 min de leitura

fonte

Duas regras governam o que acontece quando o CSS precisa decidir o "estilo final" de um elemento: cascata (combina múltiplas regras) e herança (transmite valores do pai pro filho).

Cascata: o algoritmo que decide quem aplica

Quando o navegador encontra um elemento, ele olha todas as regras que se aplicam a ele, e combina. A cascata é a regra de desempate quando há conflito. A ordem de desempate é:

  1. Origem e importância:

    • Transição do CSS (animação rodando)
    • !important do usuário (configurações de acessibilidade do usuário)
    • !important do autor (seu CSS)
    • Animação
    • Autor (seu CSS normal)
    • Usuário
    • User-agent (CSS default do navegador)

    Ou seja, o CSS do autor vence o default do navegador (a menos que o usuário force com !important). E !important sempre vence o que veio antes na lista.

  2. Especificidade (vimos no nó anterior).

  3. Ordem no código: se as duas regras empatam em tudo, a última vence.

Herança: alguns valores "vazam" pro filho

Nem toda propriedade precisa ser definida em cada elemento. Algumas são herdadas do pai por padrão:

<div class="aviso">
  <p>Texto do aviso</p>
  <a href="#">Link dentro do aviso</a>
</div>

.aviso {
  color: #b00020; /* vermelho */
  font-family: sans-serif;
}

Sem nenhuma regra extra, o <p> e o <a> herdam a cor vermelha e a fonte. O <a> ainda fica azul/roxinho porque links têm estilos do navegador (a { color: -webkit-link; }) que ganham da herança por serem aplicados diretamente. Mas se você fizer:

.aviso a { color: #b00020; }

Aí o <a> fica vermelho - você forçou.

Quais propriedades são herdadas?

Em geral:

  • Herdadas por padrão: color, font-* (família, tamanho, peso), line-height, letter-spacing, text-align, list-style, visibility, cursor.
  • Não herdadas por padrão: margin, padding, border, width, height, display, position, top/left/right/bottom, background, transform, box-shadow.

Você pode forçar a herança em qualquer propriedade:

.caixa {
  /* Por padrão não herda, mas aqui força: */
  border: inherit;
  background: inherit;
}

initial, inherit, unset, revert

Essas quatro palavras-chave são atalhos para dizer "volta pra um valor específico":

  • initial: volta pro valor inicial da propriedade (o que ela tem antes de qualquer CSS). color: initial vira preto.
  • inherit: força herdar do pai, mesmo se a propriedade não herda por padrão.
  • unset: se a propriedade herda por padrão, é igual a inherit. Se não herda, é igual a initial. "Decida você mesmo".
  • revert: volta pro valor que o user-agent (navegador) define. Útil para "cancelar" customizações e deixar o estilo padrão.

Exemplo visual

<body>
  <article>
    <p>Texto do artigo</p>
  </article>
</body>

body   { color: #333; font-size: 16px; }
article { color: #1a73e8; }   /* o <p> dentro fica azul */
p      { color: initial; }   /* o <p> força voltar pro preto default */

Resultado: o <p> fica preto. A herança tentou passar azul, mas a regra direta em p (mesmo que menos específica) ganhou por ser aplicada diretamente ao elemento. Esse é o tipo de coisa que pega muita gente de surpresa.

  • Cascata combina regras; desempata por origem, especificidade e ordem.
  • Herança propaga valores do pai pro filho. Vale para color, font-*, e mais.
  • Forçar herança: inherit. Voltar pro default: initial.
  • unset decide por você (herda se for herdável, senão initial).

Dica: a herança é sua aliada para design systems. Defina color e font-family no <body> (ou no :root) e a página inteira segue. Você estiliza só o que foge do padrão, em vez de pintar cada elemento individualmente.

No próximo nó, vamos ver os combinadores de seletores - como "pegar" elementos com base no relacionamento com outros elementos.

// recursos

// avaliação da trilha

—
ainda sem avaliações