Comment puis-je sélectionner efficacement chaque nième élément en CSS à l'aide de « nth-child() » ?

Sélection de chaque nième élément en CSS

Le sélecteur nth-child() en CSS fournit un moyen pratique de cibler des éléments enfants spécifiques dans leur élément parent. Cependant, il peut être fastidieux de répertorier chaque nième enfant individuellement. Existe-t-il une méthode plus efficace ?

Utiliser des expressions arithmétiques dans nth-child()

Le véritable pouvoir de nth-child() réside dans sa capacité à incorporer l'arithmétique expressions utilisant la variable "n". Cette variable représente la position de l'élément enfant au sein de son parent.

Sélecteur simplifié pour chaque 4ème élément

Pour sélectionner un élément div sur quatre, remplacez les sélecteurs individuels par le suivant :

div:nth-child(4n)

Cette expression signifie que le sélecteur correspond à tout élément div qui est un multiple de 4 (par exemple, 0, 4, 8, 12).

Personnalisation via l'arithmétique

La variable n permet une personnalisation plus poussée. Par exemple :

• 2n - 1 : correspond aux éléments div impairs (par exemple, 1, 3, 5).
• 4n 2 : fait correspondre les éléments div avec des positions qui sont deux de plus qu'un multiple de 4 (par exemple, 2, 6, 10).

Égalisation des expressions arithmétiques

Bien que 4n et 4n 4 puissent sembler identiques à première vue, ils ne le sont pas. nth-child() commence à compter à partir de 0. 4n correspondra aux éléments aux positions 0, 4, 8, tandis que 4n 4 correspondra aux éléments aux positions 4, 8, 12.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!