Seletores e regras que entram em conflito

Neste capítulo você vai escolher quais elementos recebem um estilo e explicar por que uma regra simples prevalece sobre outra.

Seu ponto de partida

Continue depois do capítulo 01. Abra pacote de exemplos/02-seletores-cascata. Copie inicio para uma pasta de prática. Abra index.html da cópia no navegador e no editor.

A raiz do exemplo é a referência pronta. Inicio fornece o HTML desta etapa e o CSS no estado anterior. Você modifica sua cópia e compara com a referência. Até o capítulo 11, dois cliques bastam; abrir no disco não publica a página.

Como praticar

Leia e confira as linhas indicadas. Mude uma coisa. Anote sua previsão, salve e recarregue. Compare com a explicação. Se não funcionar, investigue o erro antes de seguir. Pare e retome quando precisar; não é necessário decorar as propriedades.

Escolha um grupo com uma classe

Abra o início deste volume. O título já tem a personalização anterior. A página contém um parágrafo de apresentação e uma nota de estudo. Vamos destacar somente a nota.

Um seletor de elemento, como p, escolhe todos os parágrafos. Uma classe identifica um grupo definido por você. No HTML, class=“nota” marca a nota; no CSS, .nota encontra esse grupo. O ponto fica no CSS, não no atributo HTML.

Uma classe pode aparecer em vários elementos. Quando você repete class=“nota” em outro parágrafo, ambos recebem o mesmo ajuste. Já id identifica um elemento único e também serve como destino de links internos, como o conteúdo principal da página.

Neste volume, use classes para ajustes reutilizáveis. Não é necessário começar com seletores longos ou decorar uma lista de símbolos.

Faça no seu exemplo

Em custom.css, acrescente a regra. Em index.html, encontre o parágrafo que já tem class=“nota”. var(—accent) usa a cor de destaque da base; estudaremos essa variável no capítulo 10.

.nota {
  border-left: 4px solid var(--accent);
  padding-left: 1rem;
}

Mude uma coisa e preveja

Acrescente class=“nota” a outro parágrafo que ainda não tenha classe.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Salve os dois arquivos, recarregue e conte as notas com borda. Depois retire a classe do segundo parágrafo.

Resultado esperado neste teste: Os dois parágrafos marcados devem ganhar a borda lateral.

Se não acontecer

Se escreveu class=“.nota”, remova o ponto do HTML. O ponto é parte da sintaxe do seletor no CSS.

Observe um desempate pela ordem

Duas regras podem escolher o mesmo elemento e definir a mesma propriedade. O navegador precisa decidir qual valor aplicar. Esse processo faz parte da cascata, o conjunto de critérios que organiza as declarações CSS.

Vamos começar com um caso controlado: duas regras normais no mesmo arquivo, sem !important e sem camadas, usando exatamente o mesmo seletor. Nesse caso, a declaração escrita depois vence o desempate.

Digite as duas regras abaixo no fim de custom.css. A primeira pede texto normal e a segunda pede texto em negrito. A última será aplicada ao parágrafo de apresentação.

Isso não significa que a última regra de qualquer arquivo sempre vence. Na próxima etapa, os seletores serão diferentes. Primeiro confirme este caso pequeno.

Faça no seu exemplo

Acrescente as duas regras no fim de custom.css. O parágrafo de apresentação já usa class=“apresentacao”.

.apresentacao { font-weight: normal; }
.apresentacao { font-weight: bold; }

Mude uma coisa e preveja

Troque a ordem dessas duas regras.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Salve, recarregue e observe. Restaure a ordem do bloco para chegar ao negrito da referência.

Resultado esperado neste teste: A apresentação deve voltar ao peso normal, pois essa declaração passará a ser a última entre as duas equivalentes.

Se não acontecer

Não troque a ordem dos links do HTML para este teste. Mude somente as duas regras equivalentes que acabou de escrever.

Compare uma classe com um elemento

Mantenha a regra .apresentacao com font-weight: bold. Depois acrescente a regra p abaixo. Ela pede peso normal para todos os parágrafos, mas a apresentação continuará em negrito.

A regra de classe tem maior especificidade que a regra de elemento neste caso. Especificidade é o critério que compara os seletores quando as etapas anteriores da cascata estão empatadas. Não é uma contagem de quantas palavras você escreveu.

Considere aqui somente declarações normais do autor, sem camadas. Classes têm maior especificidade que seletores de elementos; IDs têm maior especificidade que classes. Outros recursos exigem uma explicação mais completa e ficam como consulta, não como obrigação de decorar.

Herança é outra situação. Algumas propriedades, como a fonte, passam de um elemento ancestral para seus descendentes quando eles não têm uma definição própria. Bordas e margens normalmente não são herdadas. Uma borda em main não cria bordas em todos os parágrafos.

Faça no seu exemplo

Acrescente a regra ao final de custom.css. Ela será usada para observar o conflito, não para modificar simple.css.

p { font-weight: normal; }

Mude uma coisa e preveja

Desative temporariamente a regra .apresentacao que usa bold, removendo essa linha.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Recarregue antes e depois de retirar a linha. Restaure-a e remova a regra p de teste ao concluir. Se quiser investigar, clique com o botão direito na apresentação e escolha Inspecionar; o painel de estilos mostra regras aplicadas e declarações riscadas.

Resultado esperado neste teste: Sem a declaração de classe em negrito, a apresentação deve ficar normal.

Se não acontecer

Não use !important para forçar o resultado. Primeiro confira o seletor e qual regra já define a mesma propriedade.

A captura mostra um trecho da referência concluída. Role a página do exemplo para conferir o restante. Os testes temporários podem apresentar outra aparência; restaure os valores indicados antes de comparar.

Atividades para fazer antes das respostas

Use uma nova cópia do exemplo. Estas atividades são para aplicar o que aprendeu; tente antes de ler o comentário.

1. Aplique a borda de nota a dois parágrafos.
2. Escreva duas regras .apresentacao com pesos diferentes e faça prevalecer normal.
3. Por que uma regra p no fim do arquivo pode não retirar o negrito de .apresentacao?

Respostas comentadas

Compare seu resultado e sua explicação. Um ajuste diferente pode funcionar, desde que cumpra a tarefa sem cortar conteúdo nem retirar acesso.

1. Use class=“nota” em ambos. Uma classe pode ser reutilizada.

2. No cenário equivalente deste exercício, deixe .apresentacao { font-weight: normal; } depois da outra.

3. A classe tem maior especificidade que o elemento neste conflito. A ordem só desempata depois dos critérios anteriores.

Quando seguir

Você seleciona um grupo com classe e consegue explicar os dois conflitos que testou. Se ainda precisa de ajuda para isso, repita o teste pequeno antes de avançar.

Consulta opcional

Os links abaixo aprofundam este assunto. Você não precisa lê-los para realizar a prática com os arquivos locais. Créditos da origem e licenças ficam no README.

• Referência 1

O arquivo completo

Referência do exemplo 02-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>Caderno CSS | Curso de CSS</title>
  <link rel="stylesheet" href="simple.css">
<link rel="stylesheet" href="custom.css">
  
</head>
<body>
  <a class="pular" href="#conteudo">Pular para o conteúdo</a>
  <header>
    <h1>Caderno CSS</h1>
    <p>Pequenos passos para aprender CSS.</p>
    
  </header>
  <main id="conteudo" tabindex="-1">
    <h2>Meu ponto de partida</h2>
<p class="apresentacao">Um lugar para estudar uma coisa por vez.</p>
<p class="nota">Leia, mude uma coisa e confira o resultado.</p>

  </main>
  <footer>
    <p>Material fictício para estudo local.</p>
  </footer>
</body>
</html>

custom.css

/* Personalizações do Caderno CSS. Preserve simple.css. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.pular {
  position: absolute;
  left: -10000px;
}
.pular:focus {
  position: static;
}

/* Capítulo 01 */
h1 { font-style: italic; }

/* Capítulo 02 */
.nota { border-left: 4px solid var(--accent); padding-left: 1rem; }
.apresentacao { font-weight: normal; }
.apresentacao { font-weight: bold; }