Pseudo Classe CSS :nth-of-type()

La pseudo-classe :nth-of-type() sélectionne les élément du même type sur la base de leur indice.

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

Version

Syntaxe

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

Exemple

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

Essayez-vous-même!

Dans l'exemple suivant, :nth-of-type() est spécifiée comme "odd" et "even":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      p:nth-of-type(odd) {
      background: #1c87c9;
      }
      p:nth-of-type(even) {
      background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Exemple du sélecteur nth-of-type()</h2>
    <p>Paragraphe 1</p>
    <p>Paragraphe 2</p>
    <p>Paragraphe 3</p>
    <p>Paragraphe 4</p>
    <p>Paragraphe 5</p>
    <p>Paragraphe 6</p>
    <p>Paragraphe 7</p>
    <p>Paragraphe 8</p>
    <p>Paragraphe 9</p>
    <p>Paragraphe 10</p>
  </body>
</html>