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'appliquer la logique An+B.

Bramus

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 par leur index. La microsyntaxe An+B vous permet de contrôler précisément les éléments que vous souhaitez sélectionner.

• :nth-child(2) : sélectionnez le deuxième enfant.
• :nth-child(2n) : sélectionnez tous les enfants pairs (2e, 4e, 6e, 8e, etc.).
• :nth-child(2n+1) : sélectionnez tous les enfants impairs (1er, 3e, 5e, 7e, etc.).
• :nth-child(5n+1) : sélectionnez le 1er enfant (=(5×0)+1), le 6e enfant (=(5×1)+1), le 11e enfant (=(5×2)+1), etc.
• :nth-child(5n+2) : sélectionnez le 2e enfant (=(5×0)+2), le 7e enfant (=(5×1)+2), le 12e enfant (=(5×2)+2), etc.

Toutefois, vous pouvez effectuer d'autres sélections de créations si vous omettez le paramètre A. Exemple :

• :nth-child(n+3) : sélectionnez tous les enfants à partir du troisième (3e, 4e, 5e, etc.).
• :nth-child(-n+5) : sélectionne tous les enfants jusqu'au cinquième (1er, 2e, 3e, 4e, 5e).

Combinez plusieurs de ces sélections :nth-child() pour sélectionner des plages d'éléments :

• :nth-child(n+3):nth-child(-n+5) : sélectionnez tous les enfants du 3e au 5e (3e, 4e et 5e).

:nth-last-child() vous permet d'effectuer des sélections similaires, mais au lieu de commencer à compter à partir du début, vous commencez à compter à partir de la fin.

Sélections de pré-filtrage avec la syntaxe of S

La possibilité de transmettre une liste de sélecteurs dans :nth-child() et :nth-last-child() est une nouveauté de CSS Selectors Level 4.

: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 liste de sélecteurs S donnée. Cela signifie essentiellement que vous pouvez préfiltrer les enfants avant que An+B ne fasse son travail.

Exemples

Par exemple, :nth-child(2 of .highlight) sélectionne le deuxième élément correspondant qui possède la classe .highlight. En d'autres termes, sélectionnez le deuxième enfant parmi tous ceux de la classe .highlight.

Cela contraste avec .highlight:nth-child(2), qui sélectionne l'élément qui possède la classe .highlight et qui est également le deuxième enfant.

Dans la démo ci-dessous, vous pouvez voir cette différence :

• L'élément correspondant à :nth-child(2 of .highlight) est entouré d'une bordure rose.
• L'élément correspondant à .highlight:nth-child(2) est entouré d'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 d'un ensemble d'éléments frères.

Dans la démo ci-dessous, l'élément correspondant à :nth-child(4 of .highlight, .sale) est entouré d'une bordure orange.

Rayures zébrées, revisitées

Un exemple classique d'utilisation de :nth-child() est la création d'un tableau zébré. Il s'agit d'une technique visuelle dans laquelle la couleur de chaque ligne du tableau est alternée. Normalement, vous devriez procéder comme suit :

tr:nth-child(even) {
  background-color: lightgrey;
}

Si cela fonctionne bien pour les tableaux statiques, cela devient problématique lorsque vous commencez à filtrer dynamiquement le contenu du tableau. Par exemple, si la deuxième ligne est masquée, les première et troisième lignes seront visibles, chacune avec la même couleur d'arrière-plan.

Pour résoudre ce problème, nous pouvons utiliser :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 sur Unsplash