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 😉

Télécharger les sources de la démo

Voir la démo