W3docs
fr
Se connecter

CSS :nth-of-type() Pseudo Class

La pseudo-classe :nth-of-type() CSS sélectionne les éléments du même type. Découvrez-la et pratiquez avec des exemples.

La pseudo-classe :nth-of-type() correspond aux éléments en fonction de leur position parmi les frères et sœurs du même type (le même nom de balise). Le comptage commence à 1, donc p:nth-of-type(1) est le premier <p> dans un parent, le deuxième <p> est 2, et ainsi de suite.

L'argument entre parenthèses peut être un nombre seul, le mot-clé odd ou even, ou une formule de la forme an + b. C'est donc un moyen flexible de styliser « chaque troisième élément », « toutes les rangées paires », ou « tout après le premier » sans ajouter de classes supplémentaires à votre HTML.

:nth-of-type() vs :nth-child()

C'est la distinction qui déroute le plus les gens, il est donc utile d'être précis.

  • :nth-child() compte tous les éléments frères, puis vérifie si l'élément correspondant est du type demandé.
  • :nth-of-type() compte uniquement les frères du même type, en ignorant tout le reste.

Considérez ce balisage :

<div>
  <h2>Heading</h2>
  <p>Paragraph A</p>
  <p>Paragraph B</p>
</div>
  • p:nth-child(2) sélectionne Paragraph A — c'est le 2e enfant au total, et c'est un <p>.
  • p:nth-of-type(2) sélectionne Paragraph B — c'est le 2e <p>, indépendamment du <h2> placé avant lui.

Utilisez :nth-of-type() lorsque le parent mélange différents types d'éléments et que vous souhaitez ne compter qu'un seul d'entre eux.

Version

Selectors Level 4

Selectors Level 3

Syntaxe

Syntaxe CSS de :nth-of-type()

:nth-of-type(number | odd | even | an+b) {
  css declarations;
}

L'argument accepte :

  • Un nombre — :nth-of-type(3) cible le 3e élément de ce type.
  • odd / even — mots-clés pratiques pour les éléments alternés (odd = 1, 3, 5… ; even = 2, 4, 6…).
  • Une formule an + b — par exemple :nth-of-type(3n) correspond à chaque 3e élément, et :nth-of-type(2n+1) est équivalent à odd. Ici n commence à 0 et s'incrémente, a est le pas, et b est le décalage.

Exemple du sélecteur :nth-of-type() :

Exemple de code CSS :nth-of-type()

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-of-type(3) {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:nth-of-type() selector example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
  </body>
</html>
Essayez vous-même »

Exemple de :nth-of-type spécifié comme « odd » et « even » :

Autre exemple de code CSS :nth-of-type()

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-of-type(odd) {
        background: #1c87c9;
      }
      p:nth-of-type(even) {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>nth-of-type() selector example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
    <p>Paragraph 5</p>
    <p>Paragraph 6</p>
    <p>Paragraph 7</p>
    <p>Paragraph 8</p>
    <p>Paragraph 9</p>
    <p>Paragraph 10</p>
  </body>
</html>
Essayez vous-même »

Utilisation d'une formule an+b

Une formule permet de cibler un motif répété. L'exemple ci-dessous met en surbrillance chaque 3e paragraphe (3n) et, séparément, chaque paragraphe à partir du 4e (n+4) :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-of-type(3n) {
        background: #8ebf42;
      }
      p:nth-of-type(n + 4) {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h2>nth-of-type() formula example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
    <p>Paragraph 5</p>
    <p>Paragraph 6</p>
  </body>
</html>

Avec 3n, les paragraphes 3 et 6 reçoivent le fond vert. Avec n + 4, les paragraphes 4, 5 et 6 sont en gras (tous les paragraphes à partir du 4e).

Bon à savoir

  • Le comptage commence à 1, pas à 0. :nth-of-type(1) est la première correspondance et se comporte comme :first-of-type.
  • « Type » signifie le nom de la balise, pas une classe. :nth-of-type() ne peut pas compter spécifiquement les éléments .item — il compte tous les éléments portant ce nom de balise parmi les frères. Si vous écrivez .item:nth-of-type(2), cela correspond à un élément qui est à la fois le 2e de son type et qui porte la classe item.
  • Pour compter depuis la fin de la liste plutôt que depuis le début, utilisez :nth-last-of-type().

Pages connexes

Pratique

Pratique
Que correspond le sélecteur CSS :nth-of-type() ?
Que correspond le sélecteur CSS :nth-of-type() ?
Was this page helpful?