Davantage de contrôle sur les sélections :nth-child() grâce à la syntaxe S.

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.

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