Style des éléments de liste pairs et impairs : pseudo-classes par rapport au nième enfant

Lorsque vous essayez d'obtenir des couleurs alternées pour les éléments de liste à l'aide de pseudo-classes CSS, vous pouvez rencontrer des problèmes. Bien qu'il puisse sembler logique d'utiliser li:odd et li:even à cette fin, le comportement peut être imprévisible.

Pour styliser efficacement les instances paires et impaires d'éléments de liste, envisagez d'utiliser l'approche suivante :

Au lieu de :

li { color: blue }
li:odd { color:green }
li:even { color:red }

Utiliser :

li {
    color: black;
}
li:nth-child(odd) {
    color: #777;
}
li:nth-child(even) {
    color: blue;
}

En remplaçant :odd et :even par :nth-child(odd) et :nth-child(even), l'effet de coloration alternée souhaité est obtenu. En effet :nth-child vous permet de sélectionner des éléments en fonction de leur position dans la liste, garantissant ainsi que le style correct est appliqué à chaque élément.