Pseudo Classe CSS :nth-child()

La pseudo-classe :nth-child() sélectionne et style les éléments sur la base de leur indice.

La :nth-child() peut être spécifiée par un nombre, un mot-clé, ou une formule.

Version

Syntaxe

:nth-child() {
css declarations;
}

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      p:nth-child(3) {
      background: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Exemple du sélecteur :nth-child</h2>
    <div>
    <p>Paragraphe 1</p>
    <p>Paragraphe 2</p>
    <p>Paragraphe 3</p>
    <p>Paragraphe 4</p>
    <div>
  </body>
</html>

Essayez-vous-même!

Dans cet exemple, les mot-clés "odd" et "even" sont utilisés:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      p:nth-child(odd) {
      background: #1c87c9;
      color: #eeeeee;
      }
      p:nth-child(even) {
      background: #666666;
      color: #eeeeee;
      }
    </style>
  </head>
  <body>
    <p>La première paragraphe.</p>
    <p>La deuxième paragraphe.</p>
    <p>La troisième paragraphe.</p>
  </body>
</html>