Pseudo-classe CSS :nth-of-type()

La pseudo-classe :nth-of-type() sélectionne les éléments du même type en fonction de leur index.

La pseudo-classe :nth-of-type() peut être spécifiée par un nombre, un mot-clé ou une formule. Le sélecteur :nth-of-type est similaire à :nth-child, mais il existe une différence : il est plus spécifique. :nth-of-type cible un certain type d’élément dans l’ensemble uniquement par rapport à des frères et sœurs similaires.

Version

Selectors Level 4

Selectors Level 3

Syntaxe

Syntaxe CSS :nth-of-type()

css

:nth-of-type(number) {
  css declarations;
}

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

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

html

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

Try it Yourself »

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

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

html

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

Try it Yourself »

Practice

Que sélectionne le sélecteur CSS :nth-of-type() ?

Il sélectionne chaque élément qui est le nième enfant, quel que soit son type, de son parent.Il sélectionne chaque élément qui est le nième enfant, d’un type particulier, de son parent.Il sélectionne le type unique de chaque élément dans un document HTML.Il sélectionne les éléments en fonction de leur position dans un groupe ou d’une pseudo-classe.

Pseudo-classe CSS :nth-of-type() ​

Version ​

Syntaxe ​

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