⚡ Curso de CSS • Web-ZoneWare

Pseudo-classes Estruturais: nth-child no CSS | Web Academy

Lição 40 de 50

Pseudo-classes Estruturais: nth-child no CSS | Web Academy

Chegamos ao grande encerramento do Módulo 4! Em aplicações web corporativas, os dados exibidos na tela são quase sempre dinâmicos: listas de clientes, tabelas de vendas ou feeds de postagens gerados por bancos de dados. Colocar classes manuais em cada linha HTML (como .item-1, .item-2, .item-zebrado) seria inviável. As Pseudo-classes Estruturais capacitam o CSS a inspecionar a árvore do DOM e aplicar estilos cirúrgicos com base na posição ordinal, parentesco ou fórmulas matemáticas elegantes. Nesta lição, você dominará o poder de :nth-child, a fórmula An + B, a distinção para :nth-of-type, o seletor de negação :not() e o autolimpante :empty.

1. Os Guardiões das Extremidades: :first-child, :last-child e :only-child

Antes de mergulhar na matemática avançada, o CSS nos oferece seletores semânticos diretos para os limites de um contêiner:

CSS3 16 linhas 
/* Seleciona o primeiro item de uma lista */
li:first-child {
  font-weight: 700;
  color: #38bdf8;
}
 
/* O uso mais clássico da web: remove a borda divisória do último item */
li:last-child {
  border-bottom: none;
}
 
/* Estiliza um elemento se ele for o ÚNICO filho dentro do seu pai */
.alerta:only-child {
  margin: 0 auto;
  text-align: center;
}

2. A Matemática Sagrada da Fórmula :nth-child(An + B)

A pseudo-classe :nth-child() aceita palavras-chave simples ou uma expressão algébrica linear An + B para varrer elementos em intervalos programados:

1. Palavras-Chave Rápidas (Listas e Tabelas Zebradas)

  • :nth-child(odd): Seleciona todos os filhos em posições ímpares (1, 3, 5, 7…).
  • :nth-child(even): Seleciona todos os filhos em posições pares (2, 4, 6, 8…). É a fórmula canônica para zebrar tabelas financeiras!
CSS3 4 linhas 
/* Linhas pares com fundo sutilmente destacado */
tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.03);
}

2. A Mecânica da Equação An + B

Como o navegador computa essa fórmula? Ele executa um laço onde n começa em zero (0) e incrementa sucessivamente (0, 1, 2, 3, 4…):

  • A representa a frequência ou intervalo de repetição (o “passo”).
  • B representa o ponto de partida inicial (o “deslocamento” ou offset).
Expressão CSS Valores de n Calculados Índices Selecionados no HTML Aplicação Prática
:nth-child(3) Sem variável Apenas o 3º elemento Destacar um card de plano específico.
:nth-child(3n) 3(1), 3(2), 3(3)… 3, 6, 9, 12, 15… Fim de linha em grades de 3 colunas.
:nth-child(3n + 1) 3(0)+1, 3(1)+1, 3(2)+1… 1, 4, 7, 10, 13… Início de linha em grades de 3 colunas.
:nth-child(n + 5) 0+5, 1+5, 2+5… 5, 6, 7, 8… em diante Estilizar itens excedentes (“ver mais”).
:nth-child(-n + 3) -0+3, -1+3, -2+3 1, 2 e 3 apenas! O Seletor de Pódio: destaca os 3 primeiros colocados de um ranking!

3. O Duelo Crucial: :nth-child vs. :nth-of-type

Existe uma armadilha clássica que derruba milhares de desenvolvedores no CSS. Observe este código HTML:

HTML5 5 linhas 
<div class="artigo">
  <h1>Título Principal</h1>
  <p>Primeiro parágrafo.</p>
  <p>Segundo parágrafo.</p>
</div>

Se você escrever p:nth-child(1), nada será estilizado! Por quê? Porque aos olhos do navegador, o filho de índice 1 dentro da div é o <h1>. Como o filho 1 não é um <p>, a regra falha.

A Diferença Arquitetural:

  • :nth-child: Conta todos os elementos irmãos indiscriminadamente, independentemente da tag.
  • :nth-of-type: Filtra a contagem exclusivamente entre irmãos da mesma tag HTML! No exemplo acima, p:nth-of-type(1) selecionará perfeitamente o Primeiro parágrafo.

Bônus Moderno: A Sintaxe :nth-child(An + B of .classe)

O CSS Selectors Level 4 trouxe uma das adições mais pedidas da história: a capacidade de contar filhos que correspondam a uma classe específica usando a palavra-chave of:

CSS3 4 linhas 
/* Seleciona o 2º item que possui a classe .ativo, ignorando os demais! */
.item:nth-child(2 of .ativo) {
  border: 2px solid #10b981;
}

4. A Pseudo-classe de Negação: :not()

Em vez de aplicar um estilo a todos os elementos e depois criar uma classe especial para desfazê-lo, a pseudo-classe :not() permite excluir alvos diretamente na regra:

CSS3 10 linhas 
/* Adiciona separador em todos os itens, EXCETO no último */
.lista-item:not(:last-child) {
  border-bottom: 1px solid #334155;
  margin-bottom: 12px;
}
 
/* Todos os botões ganham opacidade reduzida quando desativados */
button:not(:disabled):hover {
  filter: brightness(1.1);
}

5. A Pseudo-classe Autolimpante: :empty

A pseudo-classe :empty seleciona elementos que não contêm absolutamente nada em seu interior (nem elementos filhos, nem nós de texto).

É a solução definitiva para selos e badges de notificação que devem sumir automaticamente quando o contador for zero:

CSS3 4 linhas 
/* Se o JavaScript esvaziar o badge, ele desaparece da tela sem deixar buraco! */
.badge-contador:empty {
  display: none;
}

6. Laboratório Prático: Ranking Zebrado e Destaque de Pódio

No exemplo abaixo, combinamos a fórmula matemática de pódio :nth-child(-n + 3) para destacar os 3 líderes de um ranking, zebramos as linhas com :nth-child(even) e usamos :not(:last-child) e :empty:

HTML5 121 linhas 
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Laboratório de Pseudo-classes Estruturais</title>
  <style>
    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: #0b0f19;
      color: #f8fafc;
      padding: 30px;
    }
 
    .tabela-ranking {
      width: 100%;
      max-width: 580px;
      border-collapse: collapse;
      background: #1e293b;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid #334155;
    }
 
    th, td {
      padding: 14px 20px;
      text-align: left;
    }
 
    th {
      background: #0f172a;
      color: #94a3b8;
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
 
    /* 1. SEPARADOR EM TODOS EXCETO O ÚLTIMO (:not(:last-child)) */
    tbody tr:not(:last-child) td {
      border-bottom: 1px solid #334155;
    }
 
    /* 2. LINHAS ZEBRADAS (:nth-child(even)) */
    tbody tr:nth-child(even) {
      background-color: rgba(255, 255, 255, 0.02);
    }
 
    /* 3. O SELETOR DE PÓDIO: TOP 3 MELHORES (:nth-child(-n + 3)) */
    tbody tr:nth-child(-n + 3) td:first-child {
      font-weight: 800;
      color: #f59e0b; /* Dourado para o Top 3 */
    }
 
    tbody tr:nth-child(1) td:first-child::after { content: " 🥇"; }
    tbody tr:nth-child(2) td:first-child::after { content: " 🥈"; }
    tbody tr:nth-child(3) td:first-child::after { content: " 🥉"; }
 
    /* 4. BADGE AUTOLIMPANTE (:empty) */
    .badge-trofeu:empty {
      display: none;
    }
 
    .badge-trofeu {
      background: #3b82f6;
      color: #fff;
      font-size: 0.75rem;
      padding: 3px 8px;
      border-radius: 9999px;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <h2 style="color:#38bdf8; margin-top:0;">Quadro de Líderes da Web Academy</h2>
  <p style="color:#94a3b8; font-size:0.9rem; margin-bottom:20px;">
    Tabela estruturada matematicamente no CSS sem nenhuma classe individual por linha:
  </p>
 
  <table class="tabela-ranking">
    <thead>
      <tr>
        <th>Posição</th>
        <th>Desenvolvedor</th>
        <th>Pontos</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1º</td>
        <td>Carlos Mendes</td>
        <td>9.840</td>
        <td><span class="badge-trofeu">Líder</span></td>
      </tr>
      <tr>
        <td>2º</td>
        <td>Beatriz Lima</td>
        <td>9.410</td>
        <td><span class="badge-trofeu">Pro</span></td>
      </tr>
      <tr>
        <td>3º</td>
        <td>Rafael Souza</td>
        <td>8.950</td>
        <td><span class="badge-trofeu">Pro</span></td>
      </tr>
      <tr>
        <td>4º</td>
        <td>Juliana Ramos</td>
        <td>7.620</td>
        <td><span class="badge-trofeu"></span><!-- Vazio: auto-oculta com :empty! --></td>
      </tr>
      <tr>
        <td>5º</td>
        <td>Diego Alves</td>
        <td>6.890</td>
        <td><span class="badge-trofeu"></span><!-- Vazio: auto-oculta com :empty! --></td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Abra este laboratório no Playground IDE e teste alterar a fórmula :nth-child(-n + 3) para :nth-child(n + 4) e comprove o controle cirúrgico sobre a árvore de elementos:

⚡ Abrir no Playground IDE →

7. Celebração do Módulo 4 e Boas-Vindas ao Módulo 5

Parabéns por conquistar mais um marco extraordinário! Você concluiu 100% do Módulo 4: CSS Grid & Design Responsivo!

Ao longo das últimas 10 lições, você adquiriu habilidades de nível sênior:

  • Compreendeu a arquitetura bidimensional (2D) do CSS Grid Layout.
  • Dominou a unidade fracionária fr e a grade implícita dinâmica.
  • Criou grades mágicas auto-responsivas sem media queries com repeat(), minmax() e auto-fit.
  • Unificou o espaçamento moderno com gap no Grid e no Flexbox.
  • Projetou layouts visuais em ASCII Art com grid-template-areas.
  • Adotou a mentalidade Mobile-First progressiva com a meta viewport.
  • Dominou a moderna Sintaxe de Faixa das Media Queries e preferências de acessibilidade.
  • Eliminou distorções e o temido CLS com object-fit e aspect-ratio.
  • E dominou integralmente as pseudo-classes dinâmicas e estruturais com matemática no DOM.

Rumo à Reta Final: Entraremos agora no quinto e último módulo da trilha: Módulo 5: Animações, CSS Moderno & Projeto Final! Na Lição 41, desvendaremos o poder criativo dos Pseudo-elementos (::before e ::after)!

Rolar para cima