Les pseudo-classes :nth-child()
et :nth-last-child()
.
Résumé des caractéristiques du sélecteur :nth-child()
even
| odd
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
.
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 le numéro de la mise en forme en cours de définition.
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'attributcode="fr"
.
Les autres pseudo-classes en rapport.
Voyez aussi ces autres pseudo-classes, qui permettent également de cibler des éléments en fonction de leur position dans l'arbre du document :
:first-child
: le premier enfant du parent.:last-child
: le dernier enfant du parent.: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 comportant
sept colonnes et une seule ligne.
: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.:nth-of-type()
: les éléments qui sont en une position donnée parmi les éléments du même type.:nth-last-of-type()
: les éléments qui sont en une position donnée parmi les éléments du même type, en commençant le comptage par la fin.: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 th et des cellules td.
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.
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.
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.
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 ne sera pas opérationnel avant plusieurs mois. Lorsque tout fonctionnera bien, la deuxième image devrait être entourée d'un contour rouge.
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
).
:nth-child
:nth-last-child
of
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
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.
:root
::empty
::first-child
::last-child
::nth-child()
::nth-last-child()
::only-child
::first-of-type
::last-of-type
::nth-of-type()
::nth-last-of-type()
::only-of-type
:
Pseudo-classe désignant l'élément racine.
Pseudo-classe désignant les éléments sans contenu.
Pseudo-classe désignant le premier enfant d'un élément.
Pseudo-classe désignant le dernier enfant d'un élément.
Pseudo-classe désignant un descendant d'après son numéro.
Pseudo-classe désignant un élément à partir de son numéro, en commençant par la fin.
Pseudo-classe désignant les éléments qui sont fils uniques de leur parent.
Pseudo-classe désignant les premiers éléments de chaque type.
Pseudo-classe désignant les derniers éléments de chaque type.
Pseudo-classe désignant un élément à partir de son numéro en ne comptant que les éléments du même type.
Pseudo-classe désignant 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 dans leur type.