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

Définition et utilisation

CSS :nth-of-type(n) Le pseudo-classe est utilisé pour correspondre à l'élément fils qui est le n un élément de chaque élément fils.

n peut être un nombre/index, un mot-clé (impair ou pair) ou une formule (comme an + b)

Astuce :Voir :nth-child() Le pseudo-classe est utilisé pour sélectionner l'élément fils qui est le n un élément fils, peu importe son type.

Exemple

Exemple 1

Comment utiliser :nth-of-type() Sélecteur :

/* Sélectionnez le deuxième élément des frères div */
div:nth-of-type(2) {
  background: red;
}
/* Sélectionnez le deuxième élément li de la liste */
li:nth-of-type(2) {
  background: lightgreen;
}
/* Sélectionnez chaque troisième élément d'un groupe de frères */
:nth-of-type(3) {
  background: yellow;
}

Essayez-le vous-même

Exemple 2

impair et pair est un mot-clé, utilisé pour correspondre aux éléments d'index impair ou pair (l'index du premier élément fils est 1).

Ici, nous attribuons des couleurs de fond différentes aux éléments <p> d'index impair et pair :

p:nth-of-type(odd) {
  background: red;
}
p:nth-of-type(even) {
  background: blue;
}

Essayez-le vous-même

Exemple 3

Utilisez l'équation (an + b) Description :a représente un pas d'entier, n étant tous les entiers non négatifs de 0 à l'infini,b est un décalage d'entier.

Ici, nous attribuons la couleur de fond aux éléments <p> dont l'index est un multiple de 3 (ce qui sélectionne le troisième, le sixième, le neuvième, etc.) :

p:nth-of-type(3n+0) {
  background: red;
}

Essayez-le vous-même

Exemple 4

Ici, nous attribuons la couleur de fond aux éléments <p> dont l'index est un multiple de 3. Ensuite, nous soustrayons 1 (ce qui sélectionne le deuxième, le cinquième, le huitième, etc.) :

p:nth-of-type(3n-1) {
  background: red;
}

Essayez-le vous-même

Grammaire CSS

:nth-of-type(index | impair | pair | an+b) {
  déclarations css;
}

Détails techniques

Prise en charge du navigateur

Les nombres dans le tableau indiquent la première version de navigateur qui prend en charge ce pseudo-classe.