Comment puis-je sélectionner chaque nième élément à l'aide du sélecteur :nth-child() de CSS ?

Sélectionnez chaque nième élément avec CSS

Lorsque vous traitez un groupe d'éléments, vous souhaiterez peut-être cibler chaque nième élément. CSS fournit le sélecteur :nth-child() pour faciliter cette tâche.

:nth-child(n) vous permet de sélectionner le nième élément enfant au sein d'un élément parent. Il est possible de spécifier une nième valeur ainsi que d'effectuer des opérations arithmétiques comme l'addition, la soustraction et la multiplication de coefficients.

div:nth-child(4)

Ce sélecteur sélectionnera le quatrième élément div. Cependant, cela nécessite d'écrire des sélecteurs individuels pour chaque nième élément.

:nth-child(an) simplifie considérablement ce processus. Le « a » représente un coefficient qui peut être appliqué à « n » à l'aide d'opérations arithmétiques :

div:nth-child(4n)

Ce sélecteur sélectionnera un élément div sur quatre, remplaçant ainsi le besoin de plusieurs sélecteurs.

Pour un meilleur contrôle, des expressions arithmétiques peuvent être utilisées dans le sélecteur :

• :nth-child(an b)
• :ntième-enfant(an - b)
• :ntième-enfant(a*n)

Exemple : À sélectionnez uniquement les éléments div, à l'exclusion des autres éléments comme h1 ou p, utilisez :nth-of-type() au lieu de :nth-child():

body div:nth-of-type(4n)

Remarque : Si n est omis, la valeur par défaut est 1, en sélectionnant chaque élément.

Différence entre 4n et 4n 4 :

Bien que les deux sélecteurs correspondent à un élément div sur quatre, il existe une différence subtile à leur point de départ.

• :nth-child(4n) commence à compter à partir de 0, il sélectionne donc les éléments aux positions 4, 8, 12, etc.
• :nth-child(4n 4) commence à compter à partir de 4, il sélectionne donc les éléments aux positions 4, 8, 12, etc.

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!