Seletores e a cascata

Escolher o alvo

/* Toda tag desse tipo */
p {
  color: #a1a9b8;
}

/* Todo elemento com class="selo" */
.selo {
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* O elemento com id="conteudo" */
#conteudo {
  padding-top: 80px;
}

<p>Parágrafo comum.</p>
<p class="selo">Disponível para projetos</p>
<main id="conteudo">...</main>

Seletor	Escreve-se	Reusa?
tag	p	sim, em todas
classe	.selo	sim, quantas quiser
id	#conteudo	não: único na página

Os nomes de classe do portfólio

Este curso usa um punhado de classes, e vale conhecer as principais agora, porque as próximas doze aulas as preenchem:

Classe	O que é	Entra na aula
.envelope	o invólucro que centraliza e limita a largura	4
.prosa	o bloco de texto com largura de leitura	4
.cartao	o cartão de projeto, de área, de cargo	4
.etiqueta	a marquinha de tecnologia	4
.abertura	o topo da página inicial	5
.selo	o rótulo pequeno em maiúsculas	5
.apenas-leitor	o que só o leitor de tela recebe	6
.pular	o link "pular para o conteúdo"	6
.acao	o botão principal	6
.grade	a grade que se acomoda sozinha	8
.situacao	o selo de "no ar" no canto do cartão	10

São onze nomes, e todos dizem o papel da coisa. Nenhum diz a cor, o tamanho ou onde ela fica: esses três mudam, e um nome que os descreve mente na primeira troca.

Combinando

/* Todo <a> dentro de um <nav> */
nav a {
  text-decoration: none;
}

/* Só o <a> filho direto do <li> */
li > a {
  font-weight: 600;
}

/* Dois seletores, o mesmo estilo */
h1,
h2,
h3 {
  letter-spacing: -0.02em;
}

/* Elemento que tem as duas classes */
.cartao.destaque {
  border-color: #6ee7a5;
}

Um caso do portfólio: .cartao a pega todos os links dentro de um cartão - inclusive os que vierem dentro da descrição. Se você quer só o link de "abrir o projeto", dê classe a ele, ou use .cartao > footer > a. A regra mais curta que acerta o alvo, e nenhuma letra a mais.

Estado e posição

nav a:hover {
  color: #6ee7a5;
}

a:focus-visible {
  outline: 2px solid #6ee7a5;
  outline-offset: 2px;
}

.grade > li:first-child {
  border-color: #6ee7a5;
}

tbody tr:nth-child(even) {
  background-color: #161b22;
}

O último é o zebrado da sua tabela de stack: uma linha de CSS que faz uma tabela de oito linhas ser lida sem o dedo na tela.

:focus-visible merece atenção: é o contorno que aparece quando a pessoa navega por teclado. Nunca apague com outline: none sem colocar outra coisa no lugar; sem ele, quem usa Tab perde a posição na página - e a aula 11 do curso de HTML pediu justamente isso.

Herança

Algumas propriedades descem para os filhos sozinhas:

body {
  font-family: system-ui, sans-serif;
  color: #fbfbfb;
  line-height: 1.6;
}

Todo texto da página herda as três. Cor, fonte e altura de linha se herdam; margem, borda e fundo, não.

É por isso que a folha do portfólio começa pelo body: uma regra lá economiza vinte espalhadas.

Quem vence a briga

Quando duas regras atingem o mesmo elemento, o navegador decide nesta ordem:

1. !important: vence tudo. Evite.
2. style na tag: vence a folha de estilo.
3. Especificidade: id vale mais que classe, que vale mais que tag.
4. Ordem: empatado o resto, vence a última escrita.

p {
  color: #a1a9b8;
}
.selo {
  color: #6ee7a5;
} /* ganha de p */
#conteudo p {
  color: #fbfbfb;
} /* ganha de .selo */

Quando algo não muda

Roteiro de três passos, em ordem:

1. O seletor acerta o elemento? Abra as ferramentas do navegador (F12), clique no elemento e veja as regras aplicadas.
2. Outra regra está vencendo? As ferramentas mostram riscada a que perdeu.
3. A propriedade existe e o valor é válido? Erro de digitação é silencioso.

Um quarto suspeito, só de portfólio: você editou a folha e o navegador serviu a antiga do cache. Recarregue com Ctrl+Shift+R.

No portfólio

Hoje a folha ganha as primeiras regras que enxergam a estrutura do site:

• nav a { text-decoration: none; } para tirar o sublinhado do menu - e só do menu: os links dentro do texto continuam sublinhados, porque é assim que se sabe que são links;
• a:focus-visible com contorno bem visível, aplicado a tudo;
• tbody tr:nth-child(even) na tabela de stack;
• as classes .selo, .cartao e .envelope escritas no HTML das seis páginas, ainda sem estilo nenhum - elas ganham corpo nas próximas aulas.

Exercícios

1. Escreva as oito classes da tabela desta aula no HTML das seis páginas, sem nenhuma regra ainda.
2. Estilize só os links de dentro do <nav>, sem afetar os do texto.
3. Pinte as linhas pares da sua tabela de stack com :nth-child(even).
4. Escreva duas regras que brigam pelo mesmo elemento e descubra qual vence. Depois inverta a ordem delas no arquivo.
5. Adicione :focus-visible bem visível em todos os links e navegue o portfólio inteiro com Tab.
6. Procure na sua folha algum nome de classe que descreva aparência. Renomeie pelo papel.

Referências

• Seletores CSS - MDN - todos os tipos, com exemplos
• Cascata e herança - MDN - as regras de desempate
• CSS Selectors - W3Schools - a tabela de referência