0Pricing
CSS Academy · Aula

:nth-child e :nth-of-type

Selecione elementos pela posição dentro de um elemento pai usando fórmulas nth e seletores de tipo.

:nth-child e :nth-of-type é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.

O que são pseudoclasses estruturais?

As pseudoclasses estruturais selecionam elementos com base na sua posição dentro do elemento pai. Elas eliminam a necessidade de adicionar classes ou JavaScript para selecionar elementos filhos específicos.

:first-child e :last-child

Selecione o primeiro ou o último filho de um elemento pai:

<ul><li>First item (no top border)</li><li>Middle item</li><li>Last item (no bottom margin)</li></ul>

Fundamentos de :nth-child()

:nth-child(n) seleciona elementos com base na sua posição (indexada a partir de 1) entre irmãos de qualquer tipo.

<ul><li>Item one</li><li>Item two</li><li>Item three</li></ul>

:nth-child() com palavras-chave

Use a palavra-chave odd ou even para estilizar linhas alternadas:

<table><tr><td>Row 1</td></tr><tr><td>Row 2</td></tr><tr><td>Row 3</td></tr><tr><td>Row 4</td></tr></table>

:nth-child() com fórmulas

Use a fórmula An+B, em que A é o passo e B é o deslocamento. n começa em 0 e aumenta progressivamente.

  • 3n — a cada três elementos (3, 6, 9...)
  • 3n+1 — o primeiro de cada grupo de três (1, 4, 7...)
  • -n+3 — somente os três primeiros itens
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>

:nth-of-type()

:nth-of-type() conta apenas irmãos do mesmo tipo de elemento, ignorando os demais. Isso é importante quando há diferentes tipos de elementos misturados.

<h2>Heading</h2><p>First paragraph</p><p>Second paragraph (blue)</p><p>Third paragraph</p>

:first-of-type e :last-of-type

Selecione o primeiro ou o último elemento de um tipo específico de etiqueta entre os irmãos:

<p>Lead paragraph (larger)</p><p>Regular paragraph</p>
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60'><rect width='100' height='60' fill='%231e90ff'/></svg>" alt="one" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60'><rect width='100' height='60' fill='%23ff6347'/></svg>" alt="two" />

:nth-child vs :nth-of-type

Diferença principal:

  • p:nth-child(2) — seleciona o segundo filho SE ele for um <p>
  • p:nth-of-type(2) — seleciona o segundo <p>, independentemente dos outros elementos

:only-child e :only-of-type

:only-child seleciona um elemento que é o único filho de seu elemento pai. :only-of-type seleciona um elemento que é o único de seu tipo dentro do elemento pai.

<div><p>I'm the only child in this div.</p></div>

:nth-child com seletor of S (moderno)

O CSS moderno permite filtrar quais elementos a fórmula nth conta usando :nth-child(An+B of selector):

<ul><li class="featured">Featured 1</li><li>Regular</li><li class="featured">Featured 2 (gold)</li><li class="featured">Featured 3</li></ul>

Prática: espaçamento da grade na última linha

Remova a margem inferior do último elemento visível:

<div class="grid"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div></div>

Verificação rápida

Qual seletor seleciona cada terceiro item de uma lista, começando pelo primeiro?

Recapitulação

:nth-child() conta todos os irmãos pela posição; :nth-of-type() conta somente os irmãos da mesma etiqueta. Use odd/even para tabelas com linhas alternadas. A fórmula An+B permite criar padrões avançados, como "a cada três elementos" ou "os cinco primeiros", sem adicionar classes.

Perguntas Frequentes

A aula “:nth-child e :nth-of-type” é grátis?

Sim — o texto completo de “:nth-child e :nth-of-type” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.

O que vou aprender em “:nth-child e :nth-of-type”?

Selecione elementos pela posição dentro de um elemento pai usando fórmulas nth e seletores de tipo. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar CSS Academy?

Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “:nth-child e :nth-of-type”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de CSS Academy?

Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. :hover :focus :active e :visited
  2. :nth-child e :nth-of-type
  3. :not() :is() e :where()
  4. :checked :disabled e Pseudo-classes de Estado de Formulários
← Voltar para CSS Academy