CSS : la pseudo-classe :nth-child()

La pseudo-classe :nth-child() sélectionne et applique des styles aux éléments en fonction de leur index.

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

Valeurs sous forme de mots-clés

odd

Représente les éléments dont la position numérique est impaire (par ex. 1, 3, 5, 7, etc.).

even

Représente les éléments dont la position numérique est paire (par ex. 2, 4, 6, 8, etc.).

Notation fonctionnelle

<An+B>

Représente les éléments dont la position numérique correspond au motif An+B (pour toute valeur entière positive ou nulle de n). L'index du premier élément est 1, et n dans la formule commence à 0. Les valeurs A et B doivent être des entiers.

Version

Selectors Level 4

Selectors Level 3

Syntaxe

Syntaxe CSS :nth-child()

css

:nth-child() {
  css declarations;
}

Exemple du sélecteur :nth-child :

:nth-child() exemple de code

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-child(3) {
        background: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>:nth-child selector example</h2>
    <div>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
      <p>Paragraph 3</p>
      <p>Paragraph 4</p>
    </div>
  </body>
</html>

Try it Yourself »

Exemple des mots-clés "odd" et "even" :

CSS :nth-child() odd, even

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-child(odd) {
        background: #1c87c9;
        color: #eeeeee;
      }
      p:nth-child(even) {
        background: #666666;
        color: #eeeeee;
      }
    </style>
  </head>
  <body>
    <p>The first paragraph.</p>
    <p>The second paragraph.</p>
    <p>The third paragraph.</p>
  </body>
</html>

Try it Yourself »

Pratique

Quelle est la fonction du sélecteur nth-child() en CSS ?

Le sélecteur nth-child() en CSS correspond à tout élément qui est le nième enfant, quel que soit son type, de son parent.Le sélecteur nth-child() ne s'applique qu'aux éléments enfants d'un type spécifique.Le sélecteur nth-child() est utilisé pour sélectionner le nième frère d'un élément.Le sélecteur nth-child() peut avoir un argument représentant un entier, des nombres impairs ou pairs, ou une expression (n+an+b).Le sélecteur nth-child() peut être utilisé pour sélectionner un élément en fonction des attributs de son parent.

CSS : la pseudo-classe :nth-child() ​

Valeurs sous forme de mots-clés ​

odd ​

even ​

Notation fonctionnelle ​

<An+B> ​

Version ​

Syntaxe ​

Exemple du sélecteur :nth-child : ​

Exemple des mots-clés "odd" et "even" : ​

Pratique ​