Préfiltrez un ensemble d'éléments enfants avant d'y appliquer la logique An+B.
Sélecteurs de pseudo-classe :nth-child() et :nth-last-child()
Le sélecteur de pseudo-classe :nth-child() permet de sélectionner des éléments dans le DOM en fonction de leur indice. La microsyntaxe An+B vous permet de contrôler précisément les éléments que vous souhaitez sélectionner.
:nth-child(2): sélectionner le deuxième élément enfant.:nth-child(2n): sélectionner tous les enfants pairs (2e, 4e, 6e, 8e, etc.):nth-child(2n+1): sélectionner tous les enfants impairs (1er, 3e, 5e, 7e, etc.).:nth-child(5n+1): sélectionnez le premier (=(5×0)+1), le 6e (=(5×1)+1), le 11e (=(5×2)+1), ... enfant.:nth-child(5n+2): sélectionnez le deuxième (=(5×0)+2), le 7e (=(5×1)+2), le 12e (=(5×2)+2), ... enfant.
Toutefois, d'autres sélections de créations sont possibles si vous omettez le paramètre A. Exemple :
:nth-child(n+3): sélectionner tous les enfants en partant du troisième élément (3e, 4e, 5e, etc.):nth-child(-n+5): sélectionner tous les enfants jusqu'au 5 (1er, 2e, 3e, 4e, 5e).
Combinez quelques-unes de ces sélections :nth-child() et sélectionnez des plages d'éléments:
:nth-child(n+3):nth-child(-n+5): sélectionner tous les enfants du 3 au 5 (3, 4, 5).
Avec :nth-last-child(), vous pouvez effectuer des sélections similaires, mais au lieu de commencer à compter à partir du début, vous commencez à compter à la fin.
Préfiltrer les sélections à l'aide de la syntaxe of S
Une nouveauté de la section Sélecteurs CSS de niveau 4 permet de transmettre une liste de sélecteurs dans :nth-child() et :nth-last-child().
:nth-child(An+B [of S]?)
:nth-last-child(An+B [of S]?)
Lorsque of S est spécifié, la logique An+B n'est appliquée qu'aux éléments qui correspondent à la S de la liste de sélecteurs donnée. Cela signifie essentiellement que vous pouvez préfiltrer les enfants avant que An+B n'effectue son action.
Navigateurs pris en charge
- 111
- 111
- 113
- 9
Exemples
Par exemple, :nth-child(2 of .highlight) sélectionne le deuxième élément correspondant qui comporte la classe .highlight. Autrement dit, parmi tous les enfants de la classe .highlight, sélectionnez la deuxième.
Cela contraste avec .highlight:nth-child(2), qui sélectionne l'élément qui a la classe .highlight et qui est également le deuxième enfant.
La démonstration ci-dessous vous permet de voir cette différence:
- L'élément qui correspond à
:nth-child(2 of .highlight)a un contour rose. - L'élément qui correspond à
.highlight:nth-child(2)a un contour vert.
Notez que S est une liste de sélecteurs, ce qui signifie qu'elle accepte plusieurs sélecteurs séparés par une virgule. Par exemple, :nth-child(4 of .highlight, .sale) sélectionne le quatrième élément, .highlight ou .sale, dans un ensemble de frères et sœurs.
Dans la démonstration ci-dessous, un contour orange est appliqué à l'élément correspondant à :nth-child(4 of .highlight, .sale).
Les rayures des zèbres revisitées
La création d'une table à rayures de zèbres est un exemple classique d'utilisation de :nth-child(). Il s'agit d'une technique visuelle dans laquelle chaque ligne du tableau alterne les couleurs. Normalement, voici comment procéder:
tr:nth-child(even) {
background-color: lightgrey;
}
Bien que cette méthode fonctionne bien pour les tableaux statiques, elle devient problématique lorsque vous commencez à filtrer le contenu d'un tableau de manière dynamique. Lorsque, par exemple, la deuxième ligne est masquée, les lignes une et trois sont visibles, chacune avec la même couleur d'arrière-plan.
Pour résoudre ce problème, nous pouvons exploiter :nth-child(An+B [of S]?) en excluant les lignes masquées de la logique An+B:
tr:nth-child(even of :not([hidden])) {
background-color: lightgrey;
}
Plutôt sympa, non ?
Photo de Markus Spiske, publiée sur Unsplash