La pseudo-classe :nth-child(an+b)
permet de cibler un élément qui possède an+b-1
éléments voisins (au même niveau) avant lui dans l'arbre du document pour des valeurs entières n
et qui possède un élément parent. Autrement dit, un sélecteur utilisant cette pseudo-classe permettra de cibler les éléments fils d'un élément dont les positions correspondent au motif an+b.
/* Cible les éléments en fonction de leur position dans */
/* le document : ici le 4e, 8e, 16e, 20e, etc. quel que */
/* soit le type de l'élément */
body :nth-child(4n) {
background-color: lime;
}
Note : Pour CSS3, pour que l'élément soit ciblé, il faut qu'il ait un élément parent. En CSS4, cette restriction a été levée.
Illustrons cela avec quelques exemples :
1n+0
oun
ciblera chaque élément fils.n
ne cible aucun élément pour le navigateur Android jusqu'à la version 4.3 alors qu'1n
fonctionne.1n
est synonyme de1n+0
et les deux peuvent donc être utilisés de façon équivalente.2n+0
ou2n
ciblera les éléments fils 2, 4, 6, 8, etc. On pourra utiliser le mot-cléeven
à la place de cette expression.2n+1
ciblera les éléments fils 1, 3, 5, 7, etc. On pourra utiliser le mot-cléodd
à la place de cette expression.3n+4
permettra de cibler les éléments fils 4, 7, 10, 13, etc.0n+3
(ou plus simplement3
) permettra de cibler le troisième élément.
Les valeurs des coefficients a
et b
doivent être des entiers et l'indice du premier élément fils commence à 1. Autrement dit, cette pseudo-classe permettra de cibler les éléments fils dont l'indice appartient à l'ensemble { an + b; n = 0, 1, 2, ... }
.
Cette pseudo-classe pourra ainsi être utilisée pour mettre en forme certaines lignes d'un tableau.
Syntaxe
La pseudo-classe nth-child
prend un seul argument qui représente le motif de répétition des éléments ciblés.
Valeurs avec un mot-clé
odd
- Représente les éléments dont la position est impaire par rapport à leurs voisins.
even
- Représente les éléments dont la position est paire par rapport à leurs voisins.
Notation fonctionnelle
<An+B>
- Représente les éléments dont la position est la
An+B
-ième avecn
qui parcourt les entiers à partir de 0. Les valeurs fournies pourA
etB
doivent être des entiers (<integer>
).
Syntaxe formelle
:nth-child( <nth> [ of <complex-selector-list> ]? )où
<nth> = <an-plus-b> | even | odd
<complex-selector-list> = <complex-selector>#où
<complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*
où
<compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!
<combinator> = '>' | '+' | '~' | [ '||' ]où
<type-selector> = <wq-name> | <ns-prefix>? '*'
<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>
<pseudo-element-selector> = ':' <pseudo-class-selector>
<pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'où
<wq-name> = <ns-prefix>? <ident-token>
<ns-prefix> = [ <ident-token> | '*' ]? |
<id-selector> = <hash-token>
<class-selector> = '.' <ident-token>
<attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'où
<attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='
<attr-modifier> = i | s
Exemples
Exemples de sélecteurs
tr:nth-child(2n+1)
- Permettra de cibler les lignes impaires d'un tableau.
tr:nth-child(odd)
- Permettra de cibler les lignes impaires d'un tableau.
tr:nth-child(2n)
- Permettra de cibler les lignes paires d'un tableau.
tr:nth-child(even)
- Permettra de cibler les lignes paires d'un tableau.
span:nth-child(0n+1)
- Permettra de cibler un élément
<span>
qui est le premier fils de son parent. Cela aura le même effet que la pseudo-classe:first-child
. span:nth-child(1)
- Synonyme à l'exemple précédent.
span:nth-child(-n+3)
- Permettra de cibler un élément si celui-ci fait partie des trois premiers fils d'un parent et que c'est également un élément
span
.
Exemple démonstratif
CSS
html {
font-family: sans-serif;
}
span, div em {
padding: 10px;
border: 1px solid green;
display: inline-block;
margin-bottom: 3px;
}
.premier span:nth-child(2n+1),
.deuxieme span:nth-child(2n+1),
.troisieme span:nth-of-type(2n+1) {
background-color: lime;
}
HTML
<p>
<code>span:nth-child(2n+1)</code>,
<em>sans</em> un <code><em></code>
parmi les éléments. Les éléments fils 1, 3,
5 et 7 sont sélectionnés.
</p>
<div class="premier">
<span>Ce span est sélectionné !</span>
<span>Pas ce span ci. :(</span>
<span>Celui-ci ?</span>
<span>Celui-là ?</span>
<span>Un autre exemple</span>
<span>Et encore un</span>
<span>Puis un dernier</span>
</div>
<p>
<code>span:nth-child(2n+1)</code>,
<em>avec</em> un élément <code><em></code>
parmi les fils. Les éléments fils 1, 5,
et 7 sont sélectionnés. 3 est compté
mais n'est pas ciblé car ce n'est pas
<code><span></code>.
</p>
<div class="deuxieme">
<span>Ce span est sélectionné !</span>
<span>Pas ce span ci. :(</span>
<em>Ici on a un em.</em>
<span>Qu'en est-il de celui-ci ?</span>
<span>De celui-là ?</span>
<span>Voici un autre exemple</span>
<span>Et encore un</span>
<span>Puis un dernier</span>
</div>
<p>
<code>span:nth-of-type(2n+1)</code>,
<em>avec</em> un <code><em></code>
parmi les éléments fils. Les éléments fils
1, 4, 6 et 8 sont sélectionnés. 3 n'est pas
compté ni ciblé car c'est un <code><em></code>,
et pas un <code><span></code> et
<code>nth-of-type</code> ne sélectionne que les
fils de ce type. Ce <code><em></code> est
sauté et est ignoré.
</p>
<div class="troisieme">
<span>Ce span est sélectionné !</span>
<span>Pas ce span ci. :(</span>
<em>Ici on a un em.</em>
<span>Qu'en est-il de celui-ci ?</span>
<span>De celui-là ?</span>
<span>Voici un autre exemple</span>
<span>Et encore un</span>
<span>Puis un dernier</span>
</div>
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
Selectors Level 4 La définition de ':nth-child' dans cette spécification. |
Version de travail | Ajout de la syntaxe <selector> . Les éléments ciblés peuvent ne pas avoir d'élément parent. |
Selectors Level 3 La définition de ':nth-child' dans cette spécification. |
Recommendation | Définition initiale. |
Compatibilité des navigateurs
BCD tables only load in the browser