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

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.

Les autres pseudo-classes en rapport.

Voyez aussi ces autres pseudo-classes, qui permettent également de cibler des éléments en fonction de leur numéro d'ordre dans l'arbre du document :

• :first-child : le premier enfant du parent.
• :last-child : le dernier enfant du parent.
• :nth-child() : les éléments qui sont en une position donnée.
• :nth-last-child() : les éléments qui sont en une position donnée, en commençant le comptage par la fin.
• :only-child : les éléments qui sont 'fils unique', c'est à dire dont le parent n'a pas d'autres enfants.

Les éléments ciblés par ces pseudo-classes dans le cas d'un tableau
de sept colonnes et une ligne.
Dans un souci de simplification la balise tbody n'a pas été représentée.
 

• :first-of-type : les éléments qui sont les premiers dans le même type qu'eux.
• :last-of-type : les éléments qui sont les derniers dans le même type qu'eux.
• :only-of-type désigne les éléments dont le parent n'a pas d'autres enfants du même type.

Les éléments ciblés par les pseudo-classes ...of-type
dans le cas d'un tableau comportant des cellules titre th et des cellules td.
 

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.

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.

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.

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.

1

Pseudo-classe
:nth-of-type()

2

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

Estimation de la prise en charge globale.

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Opéra Mobile

KaiOS Browser

Samsung Internet

Opéra

Safari

Safari sur IOS

Chrome

Firefox

Edge

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

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

Caniuse

Caniuse

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.
: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).