Seletores e cascata sem mistério

Neste capítulo você vai prever qual regra será aplicada e usar uma classe para um grupo.

Seu ponto de partida

Estude depois do capítulo 04. O exemplo deste capítulo é 05-seletores-cascata, no pacote que acompanha o volume. Copie a pasta inicio para um diretório de prática e preserve o original. A raiz do exemplo é a referência concluída desta etapa. Sua cópia permite experimentar sem perder a referência.

Abra index.html da cópia com dois cliques. Edite o mesmo arquivo num editor de texto simples. Abrir no disco não publica a página.

Como praticar

Leia a explicação e digite ou confira o código indicado. Mude uma coisa. Antes de conferir, anote sua previsão. Salve, recarregue e compare. Se não acontecer o esperado, investigue o erro antes de avançar. Cada experiência parte dos valores da referência. Depois de conferir, desfaça somente a mudança desse experimento antes de começar a próxima lição. Você pode parar depois de uma lição e retomar mais tarde.

Escolha um grupo por classe

Uma classe é um rótulo reutilizável no HTML. O seletor CSS começa com ponto, mas o valor de class não. A classe aviso identifica um parágrafo especial sem alterar todos os parágrafos.

Id identifica um elemento único e também serve a destinos de links. Para personalizar grupos, prefira classes simples. Não acrescente seletores cada vez maiores para vencer um conflito.

Faça no seu exemplo

Confira o aviso em index.html e a regra correspondente.

<p class="aviso">Evento fictício. Não há inscrições reais.</p>

Mude uma coisa e preveja

Troque somente o texto do aviso.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

O parágrafo mantém seu estilo porque class permaneceu.

Se não acontecer

Não escreva class=“.aviso”. O ponto pertence ao seletor no CSS.

A cascata resolve os encontros

Mais de uma regra pode atingir o mesmo elemento. A cascata considera fatores como origem, importância e especificidade. Nos exemplos simples deste volume, com a mesma origem e sem !important, uma classe é mais específica que um seletor de elemento. Em empate, a declaração que vem depois vence.

Não resuma toda a cascata a “a última regra sempre ganha”. Vamos experimentar um empate real, com dois seletores h1 iguais.

Faça no seu exemplo

Acrescente temporariamente no final de main.css.

h1 { color: #174d69; }
h1 { color: #703c16; }

Mude uma coisa e preveja

Troque somente a cor da segunda regra por #275c32.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

H1 usa verde escuro porque a segunda regra vence o empate. Remova as regras temporárias.

Se não acontecer

Se outra classe mais específica alterar o mesmo h1, você já não está comparando dois seletores equivalentes. Use a referência desta etapa.

Herança poupa repetição

Certas propriedades, como cor e família de fonte, são herdadas por descendentes. Outras, como margem e borda, não seguem essa regra. Definir a cor do body pode cuidar do texto geral; regras específicas mudam os títulos ou avisos.

Unidades também merecem intenção. Rem se relaciona ao tamanho de fonte da raiz. Porcentagem depende da referência da propriedade. Use uma unidade por experiência antes de combinar recursos.

Faça no seu exemplo

Confira a classe aviso em main.css.

.aviso { color: #703c16; font-weight: 700; }

Mude uma coisa e preveja

Troque somente color do body para #275c32.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

O texto comum muda; o aviso continua marrom e h1 mantém sua regra própria.

Se não acontecer

Se tudo mudar, confira se removeu as regras específicas. Herança não vence uma declaração aplicada diretamente ao elemento.

A captura mostra um trecho da referência concluída. Abra e percorra o exemplo para conferir o restante. Experimentos temporários podem produzir outra aparência; restaure os valores indicados antes de comparar.

Atividades para fazer antes das respostas

Use uma nova cópia do exemplo. Tente aplicar o que aprendeu antes de consultar os comentários.

1. Crie outro parágrafo com class aviso.

2. Teste duas regras iguais e explique o resultado.

3. Explique por que o aviso não herda a cor geral.

Respostas comentadas

Compare sua explicação e o que realmente aconteceu. Outra solução pode funcionar se cumprir o objetivo e preservar o acesso ao conteúdo.

1. A classe reutiliza o estilo sem duplicar CSS.

2. Em empate, a regra posterior vence.

3. Ele tem color declarado diretamente por uma classe.

Quando seguir

Você prevê uma regra simples sem recorrer a !important. Se ainda precisa de ajuda, repita a experiência pequena antes de avançar.

O arquivo completo

Referência do exemplo 05-seletores-cascata, reproduzida aqui para que você possa conferir sem sair da página.

index.html

<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Conferência de Estilos</title>
<link rel="stylesheet" href="assets/stylesheets/main.css">
</head>
<body>
<a class="pular" href="#conteudo">Pular para o conteúdo</a>
<header><h1>Conferência de Estilos</h1><p>Pequenos passos para aprender HTML &amp; CSS.</p><nav aria-label="Principal"><a href="index.html" aria-current="page">Início</a> <a href="palestrantes.html">Palestrantes</a> </nav></header>
<main id="conteudo" tabindex="-1"><section aria-labelledby="sobre"><h2 id="sobre">Sobre o evento</h2><p>Um evento fictício para aprender fazendo.</p></section><p class="aviso">Evento fictício. Não há inscrições reais.</p></main>
<footer><p>Conferência fictícia. Exercício local.</p></footer>
</body>
</html>

assets/stylesheets/main.css

:focus-visible { outline: 3px solid #b04d00; outline-offset: 3px; }
.pular { position: absolute; left: -10000px; }
.pular:focus { position: static; display: block; padding: 1rem; background: white; }
body { background: #eef4f7; color: #203246; }
h1 { color: #174d69; }
a { color: #174d69; text-underline-offset: .2em; }
.aviso { color: #703c16; font-weight: 700; }