:nth-child CSS exemple de code | ZONE CSS Exemple d'écriture du sélecteur CSS :nth-child, code CSS détaillé avec toutes les valeurs de la CSS :nth-child. Copie d'écran de l'interprétation du sélecteur :nth-child CSS pour comparer avec l'interprétation CSS votre navigateur. Définition du sélecteur CSS :nth-child. Exemple de code du sélecteur CSS :nth-child . <style type="text/css">
ul.nthchild :nth-child (2){
border:1px solid red;
}
</style>:nth-child(2)
<ul class="nthchild">
<li> 1<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span>.</li>
<li> 2<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span>.</li>
<li> 3<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span>.</li>
</ul>
<style type="text/css">
ul.nthchilda :nth-child(1n+2) {
border:1px solid red;
}
</style>:nth-child(1n+2)
<ul class="nthchilda">
<li> 1<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span>.</li>
<li> 2<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span>.</li>
<li> 3<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span>.</li>
</ul>
<style type="text/css">
ul.nthchildb :nth-child(-1n+2) {
border:1px solid red;
}
</style>:nth-child(-1n+2)
<ul class="nthchildb">
<li> 1<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span>.</li>
<li> 2<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span>.</li>
<li> 3<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span>.</li>
</ul>
<style type="text/css">
ul.nthchildc :nth-child(even) {
color : red;
}
ul.nthchildc :nth-child(odd) {
border:1px solid red;
}
</style>:nth-child(odd) et identifiant :nth-child(even)
<ul class="nthchildc">
<li> 1<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span>.</li>
<li> 2<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span>.</li>
<li> 3<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span>.</li>
</ul>
<style type="text/css">
ul.nthchildd :nth-child(3n+2) {
border:1px solid red;
}
</style>:nth-child(3n+2)
<ul class="nthchildd">
<li> 1<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
<li> 2<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
<li> 3<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
<li> 4<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
<li> 5<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span> <span>.</span>
<ul>
<li> 1<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
<li> 2<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
<li> 3<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
<li> 4<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
<li> 5<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
<li> 6<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
</ul>
</li>
<li> 6<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
<li> 7<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
<li> 8<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
</ul>
<style type="text/css">
ul.nthchilde span:nth-child(3n+2) {
border:1px solid red;
}
</style>span:nth-child(3n+2)
<ul class="nthchilde">
<li> 1<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
<li> 2<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
<li> 3<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
<li> 4<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
<li> 5<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span> <span>.</span>
<ul>
<li> 1<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
<li> 2<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
<li> 3<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
<li> 4<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
<li> 5<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
<li> 6<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
</ul>
</li>
<li> 6<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
<li> 7<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
<li> 8<sup>ème</sup> <span>fils</span> <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
</ul>
Agrandir la zone de code HTML
Voir de code :nth-child dans :
Interprétation du code du sélecteur :nth-child CSS par votre navigateur.
:nth-child(2)
1ème fils en rouge si sélectionné .
2ème fils en rouge si sélectionné .
3ème fils en rouge si sélectionné .
:nth-child(1n+2)
1ème fils en rouge si sélectionné .
2ème fils en rouge si sélectionné .
3ème fils en rouge si sélectionné .
:nth-child(-1n+2)
1ème fils en rouge si sélectionné .
2ème fils en rouge si sélectionné .
3ème fils en rouge si sélectionné .
:nth-child(odd) et identifiant :nth-child(even)
1ème fils en rouge si sélectionné .
2ème fils en rouge si sélectionné .
3ème fils en rouge si sélectionné .
:nth-child(3n+2)
1ème fils en rouge si sélectionné .
2ème fils en rouge si sélectionné .
3ème fils en rouge si sélectionné .
4ème fils en rouge si sélectionné .
5ème fils en rouge si sélectionné .
1ème fils en rouge si sélectionné .
2ème fils en rouge si sélectionné .
3ème fils en rouge si sélectionné .
4ème fils en rouge si sélectionné .
5ème fils en rouge si sélectionné .
6ème fils en rouge si sélectionné .
6ème fils en rouge si sélectionné .
7ème fils en rouge si sélectionné .
8ème fils en rouge si sélectionné .
span:nth-child(3n+2)
1ème fils en rouge si sélectionné .
2ème fils en rouge si sélectionné .
3ème fils en rouge si sélectionné .
4ème fils en rouge si sélectionné .
5ème fils en rouge si sélectionné .
1ème fils en rouge si sélectionné .
2ème fils en rouge si sélectionné .
3ème fils en rouge si sélectionné .
4ème fils en rouge si sélectionné .
5ème fils en rouge si sélectionné .
6ème fils en rouge si sélectionné .
6ème fils en rouge si sélectionné .
7ème fils en rouge si sélectionné .
8ème fils en rouge si sélectionné .
Interprétation normale du code du sélecteur CSS :nth-child (copie d'écran).
Aller en haut de la page
Vos paramètres de cookies Ce site utilise des cookies pour améliorer votre expérience utilisateur et optimiser le fonctionnement du site. Des contenus publicitaires vous sont aussi présentés, ainsi que cookies de partages sur les réseaux sociaux.
Vous pouvez accepter ces cookies en cliquant sur « Autoriser tous les cookies », cliquer sur « Paramétrer les cookies » pour gérer vos préférences de cookies.