Blog inspirant depuis 2008
nth-child

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

listes css propriétés

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

listes css propriétés

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

Sélectionner seulement les cinq premiers

listes css propriétés 3

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

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

listes css propriétés 4

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

Sélectionner seulement les positions paires ou les impaires

listes css propriétés 5

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

listes css propriétés 6

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

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

listes css propriétés 7

li:last-child {
    color: green;
}

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

listes css propriétés 8

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….

Crédit pour la photo thumbnail : Aaron Landry

Inscription à l'infolettre Marevueweb

5 commentaires

  • Dimitri | 2011/07/19

    Super article merci :)

  • id meneo | 2011/09/19

    Merciiiiiiiiiiiii. J’avais tout compris mais impossible de sélectionner l’avant dernier!
    arf: nth-last-child(2): je vais l’apprendre par coeur ;-)

  • youn | 2011/12/14

    aïe ! je viens d’essayer avec li:nth-child(5) {color:red;}.
    résultat : tous mes li sont écrits en rouge.
    :/

  • thierry | 2012/01/21

    Très bon article. Mais ces sélecteurs ne fonctionnent pas uniquement avec les listes, ils peuvent être utilisés avec tous les autres éléments. Cela pourrait être précisé. De plus, l’article n’évoque pas les sélecteurs :first-of-type, :nth-of-type et :last-of-type. Peut-être un autre article ?

  • Louis_Dea | 2012/01/22

    Merci Thierry pour les précisions. J’ajusterai cet article avec les commentaires que tu as partagé.

Laisser un commentaire