Les pseudo-classes :nth-of-type() et :nth-last-of-type().

:nth-of-type()
:nth-last-of-type()

Résumé des caractéristiques du sélecteur :nth-of-type()

Description rapide
Pseudo-classe ciblant un élément à partir de son numéro en ne comptant que les éléments du même type.
Statut
Standard
Valeurs prédéfinies
evan | odd
Module W3C
Sélecteurs
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)
Statut du document: REC (recommandation)

Description des pseudo-classes :nth-of-type() et :nth-last-of-type().

Définition de base.

Ces pseudo-classes ciblent des éléments en fonction de leur position dans l'arbre du document, le comptage s'effectuant séparément pour chacun des types d'éléments : les div sont comptés séparément des p par exemple.

  • :nth-of-type() : les comptages s'effectuent dans l'ordre habituel, depuis le premier jusqu'au dernier.
  • :nth-last-of-type() : les comptages se font en ordre inverse, en commençant par le dernier enfant pour terminer par le premier.

La numérotation des enfants commence à 1. :nth-of-type(1) et donc équivalent à :first-of-type, et :nth-last-of-type(1) est équivalent à :last-of-type.

Alterner les mises en forme.

Les mots-clé odd (impair) et even (pair) peuvent être utilisés entre les parenthèses et permettent de définir facilement des mises en forme alternées.

Une autre syntaxe permet d'alterner plus de deux mises en forme : :nth-of-type(An+B).
A est le nombre de mises en forme à alterner.
B est le numéro de la mise en forme en cours de définition.

Par exemple, la règle :nth-of-type(3n+1){outline:1px solid;} spécifie qu'il y a trois mises en forme, et que cette définition concerne la première d'entre elle. Cette règle applique un contour aux éléments numéro 1, 4, 7, etc.

Pseudo-classes :nth-of-type() et :nth-last-of-type()
Les éléments ciblés par les pseudo-classes :nth-of-type() et :nth-last-of-type()
dans le cas d'un tableau comportant une seule ligne avec des cellules titre th et des cellules td.

Autres pseudo-classes relatives à l'ordre dans le document source.

Toutes ces pseudo-classes permettent également de cibler des éléments en fonction de leur position dans l'arbre du document :

Pseudo-classe ciblant le premier enfant d'un élément dans l'ordre du document.
Pseudo-classe ciblant le dernier enfant d'un élément, dans l'ordre du document.
Pseudo-classe ciblant un descendant d'après son numéro dans l'ordre du document.
Pseudo-classe ciblant un élément à partir de son numéro, en commençant par la fin, et dans l'ordre du document.
Pseudo-classe ciblant les éléments qui sont fils uniques de leur parent.
Pseudo-classe ciblant les premiers éléments de chaque type, dans l'ordre du document.
Pseudo-classe ciblant les derniers éléments de chaque type, dans l'ordre du document.
Pseudo-classe ciblant un élément à partir de son numéro en ne comptant que les éléments du même type.
Pseudo-classe ciblant un élément à partir de son numéro en ne comptant que les éléments du même type et en commençant par la fin.
Pseudo-classe désignant les éléments qui sont fils unique de leur parent, en ne considérant que les éléments de type identique.

Exemple avec les pseudo-classes :nth-of-type() et :nth-last-of-type().

Utilisation basique de :nth-of-type() et :nth-last-of-type().

L'élément #exemple1 ci-dessous contient aussi bien des enfants du type div que d'autres du type p. Il convient d'effectuer un comptage séparé pour chacun des types d'éléments.

div
n°1
div
n°2

p
n°1

div
n°3

p
n°2

div
n°4
div
n°5

p
n°3

p
n°4

div
n°6

Mises en forme alternées sur deux valeurs.

Les valeurs odd (impair) et even (pair) utilisées avec :nth-of-type() ou :nth-last-of-type() permettent d'obtenir facilement une mise en forme alternée.

Néanmoins, si les types d'éléments sont mélangés, l'alternance paire/impaire ne sera pas visible sur le résultat.

div
n°1
div
n°2

p
n°1

div
n°3

p
n°2

div
n°4
div
n°5

p
n°3

p
n°4

div
n°6

Alterner plus de deux mises en forme.

Il est possible de construire des mises en forme alternées sur plus de 2 valeurs en utilisant une syntaxe du genre :nth-child(An+B). Mais le résultat risque d'être encore plus brouillon qu'avec deux valeurs. Pour plus de lisibilité, notre exemple n'applique des contours que sur les éléments div, en laissant les éléments p inchangés.
Les trois mises en forme concernent les contours successivement rouge, magenta, et vert.

div
n°1
div
n°2

p
n°1

div
n°3

p
n°2

div
n°4
div
n°5

p
n°3

p
n°4

div
n°6

Prise en charge par les navigateurs (compatibilité).

Les pseudo-classes :nth-of-type() et :nth-last-of-type() sont maintenant très bien reconnues par les navigateurs.

Colonne 1
Prise en charge par les navigateurs de la pseudo-classe :nth-of-type() qui cible des enfants en fonction de leur type et de leur position dans l'arbre du document.
Colonne 2
Prise en charge par les navigateurs de la pseudo-classe :nth-last-of-type() qui cible des enfants en fonction de leur type et de leur position dans l'arbre du document, en commençant le comptage par la fin.
1
Pseudo-classe
:nth-of-type()
2
Pseudo-classe
:nth-last-of-type()
Estimation de la prise en charge globale.
97%
97%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Samsung Internet

Opéra

Safari sur IOS

Firefox

Firefox pour Androïd

Edge

Chrome

Androïd Brower

KaiOS Browser

Chrome pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

Historique de la pseudo-classe :nth-of-type().

  • Sélecteurs - Niveau 3

    Concernant :nth-of-type(). Introduction des pseudo-classes :nth-of-type() et :nth-last-of-type() dans ce niveau de la spécification.
    WD
    03 Août 1999
    Document de travail.
    CR
    13 Novembre 2001
    Candidat à la recommandation.
    PR
    15 Décembre 2009
    Proposé à la recommandation.
    REC
    29 Septembre 2011
    Recommandation.

  • Sélecteurs - Niveau 4

    Concernant :nth-of-type(). Pas de modification concernant les pseudo-classes :nth-of-type() et :nth-last-of-type().
    WD
    29 Septembre 2011
    Document de travail.
    CR
    PR
    REC

Voir aussi : pseudo-classes relatives au DOM.

Toutes les pseudo-classes listées ci-dessous permettent de désigner un élément par rapport à sa position dans le DOM, encore appelé "arbre du document" en français.

:empty
Pseudo-classe ciblant les éléments sans contenu.
:first-child
Pseudo-classe ciblant le premier enfant d'un élément dans l'ordre du document.
:first-of-type
Pseudo-classe ciblant les premiers éléments de chaque type, dans l'ordre du document.
:last-child
Pseudo-classe ciblant le dernier enfant d'un élément, dans l'ordre du document.
:last-of-type
Pseudo-classe ciblant les derniers éléments de chaque type, dans l'ordre du document.
:nth-child()
Pseudo-classe ciblant un descendant d'après son numéro dans l'ordre du document.
⚠
:nth-col()
Pseudo-classe ciblant une des colonnes dans un container grille d'après son numéro.
:nth-last-child()
Pseudo-classe ciblant un élément à partir de son numéro, en commençant par la fin, et dans l'ordre du document.
⚠
:nth-last-col()
Pseudo-classe ciblant une des colonnes dans un container grille, en commençant le comptage par la fin.
:nth-last-of-type()
Pseudo-classe ciblant un élément à partir de son numéro en ne comptant que les éléments du même type et en commençant par la fin.
:nth-of-type()
Pseudo-classe ciblant un élément à partir de son numéro en ne comptant que les éléments du même type.
:only-child
Pseudo-classe ciblant les éléments qui sont fils uniques de leur parent.
:only-of-type
Pseudo-classe désignant les éléments qui sont fils unique de leur parent, en ne considérant que les éléments de type identique.
:root
Pseudo-classe ciblant l'élément racine du document (en HTML, l'élément racine est l'élément HTML).
:scope
Cible l'élément courant. Utile dans le cas de règles imbriquées (nested CSS).
::part()
Peudo-élément qui cible un sous-élément dans l'arbre fantôme de la page (créé par template).