Aula 5 — Cascata, herança e especificidade

Quando várias regras CSS tentam estilizar o mesmo elemento, o navegador precisa decidir qual delas vence.

Essa decisão segue três conceitos fundamentais: cascata, herança e especificidade.

O que é a cascata?

A cascata define a ordem em que as regras CSS são avaliadas.

De forma simplificada, o navegador considera:

• A origem do estilo
• A ordem em que ele aparece
• A especificidade do seletor

Exemplo simples de cascata

 p { color: blue; }

p {
color: red;
}

Nesse caso, os parágrafos ficarão vermelhos, porque essa regra aparece por último.

O que é herança?

A herança permite que alguns estilos sejam passados dos elementos “pais” para os “filhos”.

Exemplo:

 body { font-family: Arial, sans-serif; color: #333; } 

Os textos dentro do <body> herdam essas propriedades.

Propriedades comuns que herdam:

• color
• font-family
• font-size

O que é especificidade?

A especificidade define o “peso” de um seletor. Quanto mais específico ele for, maior a chance de vencer conflitos.

Ordem do menos específico para o mais específico:

• Seletor de tag
• Seletor de classe
• Seletor de ID
• CSS inline

Exemplo de especificidade

 p { color: blue; }

.texto {
color: green;
}

#destaque {
color: red;
}

Se um parágrafo tiver:

 <p id="destaque" class="texto">Exemplo</p> 

Ele ficará vermelho, porque o ID é mais específico.

E o temido !important?

O !important força uma regra a vencer quase qualquer conflito. No exemplo abaixo, caso existam outras regras de cores sendo aplicadas aos parágrafos, o azul vai prevalecer por possuir o complemento !important.

 p { color: blue !important; } 

Se você precisa usar !important com frequência, o problema está na estrutura do CSS.

Modelo mental correto

Antes de tentar soluções desesperadas, pergunte:

• Existe outra regra afetando esse elemento?
• Ela é mais específica?
• Ela aparece depois?

Na próxima aula, vamos começar a parte visual do CSS, falando sobre cores 🎨✨