mozilla
Vos résultats de recherche

    :nth-child

    Résumé

    La pseudo-classe CSS :nth-child(an+b) cible un élément qui a an+b-1 nœuds frères, pour une valeur de n positive ou égale à 0, et qui a un élément parent.

    Ceci peut être décrit de manière plus claire : l'élément ciblé, est le bème enfant d'un élément, après que tous ses enfants aient été découpés en goupe de a éléments chacun.

    Les valeurs a et b doivent être des nombres entiers, et l'index du premier enfant d'un élément est 1.

    En d'autre mots, cette pseudo-classe cible tous les enfants dont l'index tombe dans le set { an + b; n = 0, 1, 2, ... }.

    Parmi différents usages, ceci permet au sélecteur de cibler une ligne sur deux dans un tableau.

    Syntaxe

    element:nth-child(an + b) { propriétés CSS }
    

    Exemples

    Exemples de sélecteurs

    tr:nth-child(2n+1)
    Représente les lignes impaires d'un tableau HTML.
    tr:nth-child(odd)
    Représente les lignes impaires d'un tableau HTML.
    tr:nth-child(2n)
    Représente les lignes paires d'un tableau HTML.
    tr:nth-child(even)
    Représente les lignes paires d'un tableau HTML.
    span:nth-child(0n+1)
    Représente un élément span qui est le premier enfant de son l'élément parent, c'est comme le sélecteur :first-child.
    span:nth-child(1)
    Équivalent de ce qu'il y a au-dessus.
    span:nth-child(-n+3)
    Les trois premiers élément span.

    Exemple d'utilisation :

    Le CSS ...

    span:nth-child(2n+1) {
      background-color: lime;
    }
    

    ... avec les balises HTML suivantes ...

    <div>
      <span>Ce span est vert!</span>
      <span>Ce span ne l'est pas. :(</span>
      <span>Mais celui-ci oui!</span>
      <span>Malheureusement celui-là ne l'est pas...</span>
    </div>
    

    ... doit donner ça :

    Spécifications

    Spécification Statut Commentaire
    Selectors Level 4
    La définition de ':nth-child' dans cette spécification.
    Version de travail Aucun changement.
    Selectors Level 3
    La définition de ':nth-child' dans cette spécification.
    Recommendation Première définition.

    Compatibilité des navigateurs

    Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Support de base 1.0 3.5 (1.9.1) 9.0 9.5 3.1
    Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Support de base 2.1 1.0 (1.9.1) 9.0 9.5 3.1

    Notes

    Opera ne peut pas gérer l'insertion dynamique d'élément.

    Étiquettes et contributeurs liés au document

    Dernière mise à jour par : clementpolito,