1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
|
---
title: ':nth-child'
slug: 'Web/CSS/:nth-child'
tags:
- CSS
- Pseudo-classe
- Reference
translation_of: 'Web/CSS/:nth-child'
---
<div>{{CSSRef}}</div>
<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:nth-child(an+b)</code></strong> permet de cibler un élément qui possède <code><em>a</em>n+<em>b</em>-1</code> éléments voisins (au même niveau) avant lui dans l'arbre du document pour des valeurs entières <code>n</code> 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 <em>an+b</em>.</p>
<pre class="brush: css no-line-numbers">/* 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;
}</pre>
<div class="note">
<p><strong>Note :</strong> 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.</p>
</div>
<p>Illustrons cela avec quelques exemples :</p>
<ul>
<li><code>1n+0</code> ou <code>n</code> ciblera chaque élément fils. <code>n</code> ne cible aucun élément pour le navigateur Android jusqu'à la version 4.3 alors qu'<code>1n</code> fonctionne. <code>1n</code> est synonyme de <code>1n+0</code> et les deux peuvent donc être utilisés de façon équivalente.</li>
<li><code>2n+0</code> ou <code>2n</code> ciblera les éléments fils 2, 4, 6, 8, etc. On pourra utiliser le mot-clé <strong><code>even</code></strong> à la place de cette expression.</li>
<li><code>2n+1</code> ciblera les éléments fils 1, 3, 5, 7, etc. On pourra utiliser le mot-clé <strong><code>odd</code></strong> à la place de cette expression.</li>
<li><code>3n+4</code> permettra de cibler les éléments fils 4, 7, 10, 13, etc.</li>
<li><code>0n+3</code> (ou plus simplement <code>3</code>) permettra de cibler le troisième élément.</li>
</ul>
<p>Les valeurs des coefficients <code><em>a</em></code> et <code><em>b</em></code> 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 <code>{ an + b; n = 0, 1, 2, ... }</code>.</p>
<p>Cette pseudo-classe pourra ainsi être utilisée pour mettre en forme certaines lignes d'un tableau.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<p>La pseudo-classe <code>nth-child</code> prend un seul argument qui représente le motif de répétition des éléments ciblés.</p>
<h3 id="Valeurs_avec_un_mot-clé">Valeurs avec un mot-clé</h3>
<dl>
<dt><code>odd</code></dt>
<dd>Représente les éléments dont la position est impaire par rapport à leurs voisins.</dd>
<dt><code>even</code></dt>
<dd>Représente les éléments dont la position est paire par rapport à leurs voisins.</dd>
</dl>
<h3 id="Notation_fonctionnelle">Notation fonctionnelle</h3>
<dl>
<dt><code><An+B></code></dt>
<dd>Représente les éléments dont la position est la <code>An+B</code>-ième avec <code>n</code> qui parcourt les entiers à partir de 0. Les valeurs fournies pour <code>A</code> et <code>B</code> doivent être des entiers ({{cssxref("<integer>")}}).</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Exemples">Exemples</h2>
<h3 id="Exemples_de_sélecteurs">Exemples de sélecteurs</h3>
<dl>
<dt><code>tr:nth-child(2n+1)</code></dt>
<dd>Permettra de cibler les lignes impaires d'un tableau.</dd>
<dt><code>tr:nth-child(odd)</code></dt>
<dd>Permettra de cibler les lignes impaires d'un tableau.</dd>
<dt><code>tr:nth-child(2n)</code></dt>
<dd>Permettra de cibler les lignes paires d'un tableau.</dd>
<dt><code>tr:nth-child(even)</code></dt>
<dd>Permettra de cibler les lignes paires d'un tableau.</dd>
<dt><code>span:nth-child(0n+1)</code></dt>
<dd>Permettra de cibler un élément {{HTMLElement("span")}} qui est le premier fils de son parent. Cela aura le même effet que la pseudo-classe {{cssxref(":first-child")}}.</dd>
<dt><code>span:nth-child(1)</code></dt>
<dd>Synonyme à l'exemple précédent.</dd>
<dt><code>span:nth-child(-n+3)</code></dt>
<dd>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 <code>span</code>.</dd>
</dl>
<h3 id="Exemple_démonstratif">Exemple démonstratif</h3>
<div id="Exemple_demonstratif">
<h4 id="CSS">CSS</h4>
<pre class="brush: 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;
}</pre>
<h4 id="HTML">HTML</h4>
<pre class="brush:html"><p>
<code>span:nth-child(2n+1)</code>,
<em>sans</em> un <code>&lt;em&gt;</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>&lt;em&gt;</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>&lt;span&gt;</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>&lt;em&gt;</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>&lt;em&gt;</code>,
et pas un <code>&lt;span&gt;</code> et
<code>nth-of-type</code> ne sélectionne que les
fils de ce type. Ce <code>&lt;em&gt;</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>
</pre>
</div>
<h4 id="Résultat">Résultat</h4>
<div>{{EmbedLiveSample('Exemple_demonstratif','100%', '550')}}</div>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
<td>{{Spec2('CSS4 Selectors')}}</td>
<td>Ajout de la syntaxe <code><selector></code>. Les éléments ciblés peuvent ne pas avoir d'élément parent.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
<td>{{Spec2('CSS3 Selectors')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{Compat("css.selectors.nth-child")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{cssxref(":nth-of-type")}}</li>
<li>{{cssxref(":first-child")}}</li>
<li>{{cssxref(":last-child")}}</li>
</ul>
|
