Pseudo-classe nth-of-type

La pseudo-classe nth-of-type sélectionne un élément qui est le n-ième enfant d'un type donné.

C'est-à-dire que si j'écris h2:nth-of-type(4) - le 4-ième h2 dans le parent sera trouvé (contrairement à nth-child, qui ne trouvera que le h2 qui est le 4-ième élément dans le parent).

Syntaxe

csssélecteur:nth-of-type(nombre | odd | even | expression){

}

Valeurs

Valeur	Description
nombre	Un nombre positif à partir de `1`. Spécifie le numéro de l'élément auquel nous voulons nous adresser. La numérotation des éléments commence à `1`.
`odd`	Éléments impairs.
`even`	Éléments pairs.
expression	Il est possible de composer des expressions spéciales avec la lettre n, qui représente tous les nombres entiers à partir de zéro (et non pas un) jusqu'à l'infini. Ainsi, `2n` signifie tous les nombres pairs (à partir du deuxième). Comment comprendre cela ? Nous substituons dans `n` séquentiellement les nombres à partir de `0` et ainsi de suite : si n = 0, alors 2n donnera 0 - un tel élément n'existe pas (la numérotation des éléments commence à 1), si n = 1, alors 2n donnera 2 - le deuxième élément, si n = 2, 2n donne 4 - le quatrième élément. Si on écrit 3n - ce sera chaque troisième élément (à partir du troisième), et ainsi de suite.

Exemple

Trouvons le h2 qui est le 2-ième h2 dans le parent :

html<div>
  <h2>titre</h2>
  <p>paragraphe</p>
  
  <h2>titre</h2>
  <p>paragraphe</p>
  
  <h2>titre</h2>
  <p>paragraphe</p>
</div>

cssh2:nth-of-type(2) {
  color: red;
}

Результат:

Exemple

Trouvons tous les h2 pairs :

html<div>
  <h2>titre</h2>
  <p>paragraphe</p>
  
  <h2>titre</h2>
  <p>paragraphe</p>
  
  <h2>titre</h2>
  <p>paragraphe</p>
  
  <h2>titre</h2>
  <p>paragraphe</p>
  
  <h2>titre</h2>
  <p>paragraphe</p>
</div>

cssh2:nth-of-type(even) {
  color: red;
}

Результат:

Exemple

Trouvons tous les h2 impairs :

html<div>
  <h2>titre</h2>
  <p>paragraphe</p>
  
  <h2>titre</h2>
  <p>paragraphe</p>
  
  <h2>titre</h2>
  <p>paragraphe</p>
  
  <h2>titre</h2>
  <p>paragraphe</p>
  
  <h2>titre</h2>
  <p>paragraphe</p>
</div>

cssh2:nth-of-type(odd) {
  color: red;
}

Результат: