La puissance des motifs : utiliser nth-child

Fait partie de la section CSS Mastery du Journey HTML de Coddy — leçon 15 sur 43.

La pseudo-classe :nth-child() sélectionne des éléments en fonction de leur ordre à l'intérieur d'un parent, en utilisant un nombre ou un motif pour choisir lesquels.

Par exemple, nous avons une liste :

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

Voici comment nous sélectionnons les éléments de liste pairs :

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

Voici comment nous sélectionnons le 3ème élément :

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

Voici comment sélectionner chaque 5ème élément :

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

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Défi

Facile

Créez une règle CSS en utilisant :nth-child() pour donner à chaque troisième <div> un arrière-plan yellow.

Aide-mémoire

La pseudo-classe :nth-child() sélectionne des éléments en fonction de leur ordre à l'intérieur d'un parent.

Sélectionner les éléments pairs :

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

Sélectionner un élément spécifique (le 3ème) :

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

Sélectionner chaque n-ième élément (tous les 5 éléments) :

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

Essayez vous-même

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

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.