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

Web-Zoneware — Thu, 22 Oct 2026 03:23:53 +0000

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;
}

/* 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);
}

/* 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

 class="artigo">
  Título Principal
  Primeiro parágrafo.
  Segundo parágrafo.

<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

. Como o filho 1 não é um
, 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;
}

/* 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);
}

/* 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;
}

/* 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

 html>
 lang="pt-BR">

   charset="UTF-8">
  </span>Laboratório de Pseudo-classes Estruturais<span class="wzw-tk-tag">
  


   style="color:#38bdf8; margin-top:0;">Quadro de Líderes da Web Academy
   style="color:#94a3b8; font-size:0.9rem; margin-bottom:20px;">
    Tabela estruturada matematicamente no CSS sem nenhuma classe individual por linha:
  
 
   class="tabela-ranking">
    
      
        Posição
        Desenvolvedor
        Pontos
        Status
      
    
    
      
        1º
        Carlos Mendes
        9.840
         class="badge-trofeu">Líder
      
      
        2º
        Beatriz Lima
        9.410
         class="badge-trofeu">Pro
      
      
        3º
        Rafael Souza
        8.950
         class="badge-trofeu">Pro
      
      
        4º
        Juliana Ramos
        7.620
         class="badge-trofeu">
      
      
        5º
        Diego Alves
        6.890
         class="badge-trofeu">

<!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)!

O post Pseudo-classes Estruturais: nth-child no CSS | Web Academy apareceu primeiro em Web-Zoneware.

Arquivos nth-child - Web-Zoneware

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

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

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

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

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

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

Título Principal

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

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

5. A Pseudo-classe Autolimpante: :empty

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

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

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

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

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

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

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

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

5. A Pseudo-classe Autolimpante: `:empty`