Que ça soit lors de l’utilisation de liste ou de tableau, le sélecteur css nth-child est bien pratique dans divers cas. On va voir les différentes possibilités.

Sélection du premier élément

li:first-child { background-color: #008080; }

Sélection d’un élément spécifique

li:nth-child(2) { background-color: #008080; }

Sélection des 5 premiers éléments

li:nth-child(-n+5) { background-color: #008080; }

Sélection des 5 derniers éléments

li:nth-child(n+6) { background-color: #008080; }

Sélection tous les 3 éléments

li:nth-child(3n+1) { background-color: #008080; }

Sélection par éléments paires et impaires

li:nth-child(even) { background-color: #008080; }

li:nth-child(odd) { background-color: #008080; }

Sélection du dernier élément

li:last-child { background-color: #008080; }

Sélection de l’avant dernier élément

li:nth-last-child(2) { background-color: #008080; }

Et voilà pour le petit tour d’horizon des sélecteurs CSS nth-child 😉