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 😉
