La propriété CSS :nth-child pour un contrôle absolu de vos listes

Afin de styliser en CSS une liste d’éléments, que ce soit pour la navigation de votre site web ou pour une liste dans vos contenus, vous pouvez utiliser un « ID » différent pour chacun de vos items.

Cependant, cela aura comme inconvénient de vous créer plusieurs lignes de codes qui auraient pu être évitées à l’aide de différentes propriétés telles que :nth-child, :nth-of-type, :first-child et :last-child.

Ces propriétés sont également très utiles lorsque vous avez une liste avec énormément d’éléments.

Voici un article illustrant à merveille l’utilisation de chacune de ces propriétés CSS dans différents contextes afin d’avoir un contrôle absolu sur vos listes HTML.

L’article suivant a été écrit par Chris Coyier du site web CSS-Tricks.com

Sélectionner seulement le 5e élément

li:nth-child(5) {
    color: green;
}

Si vous devez sélectionner seulement le 1er élément de la liste, vous pouvez utiliser ceci li:first-child ou tout simplement li:nth-child(1).

Tout sélectionner sauf les cinq premiers

li:nth-child(n+6) {
    color: green;
}

Sélectionner seulement les cinq premiers

li:nth-child(-n+5) {
    color: green;
}

Selectionner à chaque quatre éléments, en comment par le premier

li:nth-child(4n-7) {  /* or 4n+1 */
    color: green;
}

Sélectionner seulement les positions paires ou les impaires

li:nth-child(odd) {
    color: green;
}

li:nth-child(even) {
    color: green;
}

Sélectionner le dernier élément de la liste

li:last-child {
    color: green;
}

Sélectionner l’avant-dernier élément de la liste

li:nth-last-child(2) {
    color: green;
}

Compatibilité des fureteurs

La propriété :first-child est supporté par Internet Explorer depuis la version 7, mais ce n’est que depuis la version 9 de IE que le reste des propriétés est devenu compatible. Mise à part Internet Explorer, ces propriétés sont supportées par les fureteurs populaires. Si vous voulez quand même utiliser ces propriétés avec IE, vous pouvez utiliser le service Selectivizr.

Aussi, si vous êtes intéressé par la compatibilité des navigateurs par rapport à diverses propriétés, vous pouvez également visiter le site web When can I use….

Vous avez apprécié l'article?