O poder dos padrões: Usando nth-child

Parte da seção CSS Mastery do Journey de HTML da Coddy — lição 15 de 43.

A pseudo-classe :nth-child() seleciona elementos com base em sua ordem dentro de um elemento pai, usando um número ou um padrão para escolher quais.

Por exemplo, temos uma lista:

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
  <li>Fifth item</li>
</ul>

Veja como selecionamos itens de lista pares:

li:nth-child(even) {
  background-color: lightblue;
}

É assim que selecionamos o 3º item:

li:nth-child(3) {
  font-weight: bold;
}

É assim que selecionamos cada 5º item:

li:nth-child(5n) {
  color: red;
}

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Desafio

Fácil

Crie uma regra CSS usando :nth-child() para dar a cada terceiro <div> um fundo yellow.

Folha de consulta

A pseudo-classe :nth-child() seleciona elementos com base em sua ordem dentro de um elemento pai.

Selecionar elementos de número par:

li:nth-child(even) {
  background-color: lightblue;
}

Selecionar um elemento específico (3º):

li:nth-child(3) {
  font-weight: bold;
}

Selecionar a cada n-ésimo elemento (a cada 5º):

li:nth-child(5n) {
  color: red;
}

Experimente você mesmo

<!DOCTYPE html>
<html>
<head>
    <title>Pattern Power: Using nth-child</title>
  <style>
    /* Write your CSS rule here */
    
  </style>
</head>
<body>
  <div class="container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
    <div>Item 7</div>
    <div>Item 8</div>
    <div>Item 9</div>
    <div>Item 10</div>
  </div>
</body>
</html>

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.