Módulo 11: Interatividade Avançada
2. Resumo da Aula Anterior
No Módulo 10, dominámos o CSS Grid e aprendemos a construir layouts complexos e bidimensionais. Agora, vamos aprender a injetar estilo e conteúdo "invisível" usando seletores especiais.
3. O Que Vais Aprender Hoje
- ✅ Estados dinâmicos com Pseudo-classes (:hover, :active, :focus).
- ✅ Seleção por posição (:first-child, :nth-child).
- ✅ Injetar conteúdo extra com Pseudo-elementos (::before, ::after).
- ✅ Criar efeitos criativos sem mudar o HTML.
4. Teoria: Os Elementos Fantasma
Conceito: As Pseudo-classes capturam estados (como quando o utilizador clica num botão). Os Pseudo-elementos são como "sub-elementos" que não existem no código HTML, mas que o CSS pode criar para adicionar detalhes visuais ou ícones.
🎭 Analogia: O Ator e o Disfarce
Imagina um ator em palco:
- O Ator (Elemento HTML): É a estrutura real que está lá (ex: um botão).
- Pseudo-classe (:hover): É a cor que o ator ganha quando alguém o aplaude. Ele muda de estado.
- Pseudo-elemento (::after): É uma bengala ou um chapéu que o ator "invoca" do nada para completar a sua cena. Não faz parte do corpo dele, mas está lá a ajudar!
5. Exemplos Práticos
Exemplo 1: Seletores de Posição
Estilizar o primeiro e o último item de forma diferente.
li:first-child { font-weight: bold; }
li:last-child { color: red; }
/* Zebrar uma tabela (apenas os pares) */
tr:nth-child(even) { background-color: #f9f9f9; }O nth-child é incrivelmente poderoso para listas dinâmicas.
Exemplo 2: O Poder do ::before
Adicionar um "extra" antes do texto.
.link-externo::after {
content: " ↗"; /* Obrigatório! */
font-size: 0.8em;
color: blue;
}Isto adiciona uma setinha a todos os links com esta classe, sem teres de a escrever manualmente em cada um no HTML.
6. Agora é a Tua Vez!
Vamos criar um "Menu de Lista Zeta":
- Cria uma lista
<ul>com 5 itens. - No CSS, usa
:nth-child(2)para pintar o segundo item de azul. - Usa
::beforenos itens da lista para colocar um emoji de um ponto (•) ou uma estrela (⭐). - Lembra-te: o pseudo-elemento precisa da propriedade
content: ""! - Adiciona um efeito
:hoverque muda o tamanho do emoji.
7. Verificação de Conhecimento
8. Resumo do Que Aprendemos
- 📌 Pseudo-classes (1 ponto `:`) indicam estados ou posições.
- 📌 Pseudo-elementos (2 pontos `::`) criam partes novas do elemento.
- 📌 ::before e ::after são os mais usados para ícones e decorações.
- 📌 A propriedade content é o motor dos pseudo-elementos.
9. Desafios Práticos
Desafio 1: O Foco
Qual pseudo-classe se ativa quando clicas dentro de um campo de formulário (input)?
Desafio 2: Pintar a Seleção
Sabias que podes mudar a cor de fundo que aparece quando um utilizador seleciona texto com o rato? Qual é o pseudo-elemento para isso?
Desafio 3: Lista Inteligente
Como selecionas todos os itens de uma lista EXCETO o primeiro?