Les pseudo-classes :nth-child() et :nth-last-child().

:nth-child()
:nth-last-child()

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

Description rapide
Pseudo-classe ciblant un descendant d'après son numéro dans l'ordre du document.
Statut
Standard
Valeurs prédéfinies
even | 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-child() et :nth-last-child().

Définition de base.

Ces pseudo-classes permettent de cibler des éléments en fonction de leur emplacement dans l'arbre du document :

  • :nth-child() : l'élément qui est à une position donnée parmi les enfants de leur parent.
    Exemple : :nth-child(3) désigne le troisième enfant.
  • :nth-last-child() : la même chose mais en commençant le comptage par la fin.
    Exemple : :nth-lat-child(2) désigne l'avant-dernier enfant.

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

Pseudo-classes :nth-child() et :nth-last-child()
Exemple d'un tableau comportant une seule ligne avec sept cellules td.

Alterner les mises en forme.

La syntaxe :nth-child(An + B) permet d'alterner plusieurs mises en forme.
A est le nombre de mises en forme à alterner.
B est un décalage.

Par exemple, la règle :nth-child(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.

Limiter le comptage à certains éléments.

Depuis le niveau 4 de la spécification, il est possible de ne compter que les éléments qui sont ciblés par un sélecteur.
Voici quelques exemples :

  • td :nth-child(2 of img) cible la deuxième image contenue dans une cellule, même pour les cellules qui contiennent également des éléments d'un autre type, comme des paragraphes.
  • :nth-child(1 of [lang="fr"]) cible les premiers paragraphes qui comportent l'attribut code="fr".

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-child() et :nth-last-child().

Utilisation basique de :nth-child() et :nth-last-child().

Dans l'exemple ci-dessous, un contour vert a été appliqué à l'élément numéro 4, et un contour magenta à l'élément numéro 3 en commençant à compter à partir de la fin.

1
2
3
4
5
6
7
8
9
10

Mises en forme alternées sur deux valeurs.

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

1
2
3
4
5
6
7
8
9
10

Mises en forme alternées sur plus de deux valeurs.

Il est tout à fait possible de construire des mises en forme alternées sur plus de 2 valeurs en utilisant une syntaxe du genre :nth-child(An+B). Notre exemple alterne 4 couleurs.

La première série a été mise en forme avec :nth-child(), tandis que la deuxième l'a été avec :nth-last-child(). Cela ne change finalement que la répartition des couleurs.

1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10

 

Indiquer le type des éléments à prendre en compte dans le comptage.

La spécification du W3C prévoit maintenant la possibilité d'indiquer dans la syntaxe le type des éléments à prendre en compte dans le comptage. Par exemple il est possible de spécifier la deuxième image contenue dans une cellule de tableau, même si cette cellule contient également d'autres types d'éléments comme des paragraphes.
Le type des éléments à compter est introduit par le mot of. Exemple : :nth-child(2 of img).

En fait, le terme qui suit le mot clé of peut être n'importe quel sélecteur, il est donc possible de limiter le comptage éléments d'une certaine classe, ou même aux éléments qui comportent un certain attribut.

L'exemple ci-dessous risque de ne pas fonctionner sur certains navigateurs en en particulier sur mobile. Lorsque tout fonctionnera bien, la deuxième image devrait être entourée d'un contour rouge.

Murier : Exemple avec :nth-child Pin parasol : Exemple avec :nth-child

Prise en charge par les navigateurs (compatibilité).

Les pseudo-classes :nth-child() et :nth-last-child() en elles-mêmes sont maintenant très bien reconnues par les navigateurs, mais il reste des problèmes avec la nouvelle syntaxe permettant de limiter le comptage à certains types d'éléments (mot clé of).

Colonne 1
Support par les navigateurs de la pseudo-classe :nth-child() qui cible l'enfant d'un certain numéro dans l'ordre d'apparition dans le code source.
Colonne 2
Support par les navigateurs de la pseudo-classe :nth-last-child() qui cible l'élément d'un certain numéro en commençant le comptage par la fin.
Colonne 3
Support par les navigateurs des pseudo-classes :nth-child et :nth-last-child pour cibler des éléments sans parent.
Colonne 4
Support par les navigateurs de la clause of dans les paramètres de :nth-child ou :nth-last-child, pour ne compter que les éléments du o des types indiqués.
1
Pseudo-classe
:nth-child
2
Pseudo-classe
:nth-last-child
3
:nth-child()
Sans parent
4
Syntaxe avec
le mot-clé of
Estimation de la prise en charge globale.
97%
97%
83%
93%

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

KaiOS Browser

Androïd Brower

Chrome pour Androïd

Opéra mini

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

Historique de la pseudo-classe :nth-child().

  • Sélecteurs - Niveau 3

    Concernant :nth-child(). Introduction des pseudo-classes :nth-child() et :nth-last-child() dans ce niveau 3 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-child(). Ajout de la clause of pour les pseudo-classes :nth-child() et :nth-last-child() (niveau 4 de la spécification).
    WD
    29 Septembre 2011
    Document de travail.
    CR
    PR
    REC

Voir aussi : pseudo-classes relatives au DOM.

Voici la liste des pseudo-classes qui permettent de désigner un élément en fonction de sa position dans l'arbre du document.

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