Comprendre le sélecteur CSS :nth-child()

Comme tous les sélecteurs CSS, vous pouvez utiliser :nth-child() pour identifier les éléments d'une page Web et leur appliquer des styles. Mais ce sélecteur vous permet d'affiner un ensemble de frères et sœurs en fonction de leur position relative.

Le sélecteur prend en charge certains mots-clés de base pour les cas courants, mais il fournit également une puissante syntaxe de correspondance de modèles. En l'utilisant, vous pouvez sélectionner des éléments basés sur des modèles réguliers et répétitifs ou des définitions plus complexes, en fonction de vos besoins.

La syntaxe du sélecteur :nth-child()

Comme un Sélecteur de pseudo-classe CSS, la syntaxe :nth-child() diffère des autres sélecteurs. Il prend un argument comme modèle pour faire correspondre les éléments d'un ensemble de frères et sœurs :

:nth-child(args) {
/*...*/
}

L’accent est mis principalement sur les arguments entre parenthèses. Ces arguments définissent le sous-ensemble d'éléments à sélectionner.

Utilisation de valeurs de mots clés pour les cas courants

Ce sélecteur peut accueillir deux valeurs de mots clés: impair et même. Ils sont particulièrement utiles pour styliser des lignes alternatives dans un tableau.

Une simple liste ordonnée est un autre bon exemple d'utilisation de ces valeurs de mots clés :

<ol>
<li>Item 1li>
<li>Item 2li>
<li>Item 3li>
<li>Item 4li>
<li>Item 5li>
<li>Item 6li>
<li>Item 7li>
ol>

En utilisant le :énième enfant (impair) sélecteur, vous pouvez changer la couleur de chaque élément alternatif :

:nth-child(odd) {
color: red;
}

Les éléments commencent à l'index 1, donc le premier élément apparaîtra en rouge, puis le troisième, et ainsi de suite :

Notation fonctionnelle pour plus de flexibilité

Vous pouvez utiliser un seul entier pour sélectionner un élément individuel, comme ceci :

li:nth-child(4) {
color: red;
}

Dans ce cas, le sélecteur ne correspond qu'au quatrième élément de la liste :

Cette syntaxe est un cas particulier de la syntaxe fonctionnelle plus générale qui sélectionne les éléments correspondant à un modèle donné. Cette syntaxe est :

:nth-child(An+B) {
/*...*/
}

Dans cette notation, UN est la taille du pas. Cela signifie le nombre de fois que le sélecteur se déplace pour sélectionner l'élément suivant. Il vous permet de sélectionner un élément sur deux, un élément sur trois, etc. B est le point de départ où commence la sélection.

Par exemple, prenons l'argument 3n+1 :

li:nth-child(3n+1) {
color: red;
}

Cela commencera la sélection au premier élément et se poursuivra avec un élément sur trois par la suite :

Comparez cela avec l’expression 3n+2 :

li:nth-child(3n+2) {
color:red;
}

Cela sélectionne toujours un élément sur trois, mais cela commence désormais à partir du deuxième élément de la liste :

Un autre exemple intéressant est :nth-child (n+3) :

li:nth-child(n+3) {
color: red;
}

Celui-ci sélectionnera chaque élément (n), en commençant par le troisième (+3). Il ressemblera à ceci:

Vous pouvez également utiliser la soustraction pour obtenir certains résultats :

li:nth-child(3n-1) {
color: red;
}

Cet exemple sélectionne toujours un élément sur trois, mais il commence par le « moins en premier ». En effet, cela signifie qu'il sélectionnera le deuxième élément de la liste, puis le cinquième, et ainsi de suite :

Le de Syntaxe

Vous pouvez également utiliser le mot-clé de suivi d'un sélecteur comme argument dans le sélecteur :nth-child(). Cette syntaxe vous permet d'affiner les éléments possibles parmi lesquels le modèle régulier sélectionne.

Par exemple, imaginez que votre balisage soit plus compliqué que l'original :

<ol>
<liclass="old">Item 1li>
<liclass="new">Item 2li>
<liclass="new">Item 3li>
<liclass="old">Item 4li>
<liclass="new">Item 5li>
<liclass="new">Item 6li>
<liclass="new">Item 7li>
ol>

Maintenant, utilisez :nth-child pour sélectionner les éléments pairs dans l'ensemble de ceux ayant une classe spécifique :

.new {
font-weight: bold;
}
li:nth-child(evenof.new) {
color: red;
}

Remarquez que seuls les éléments gras pairs sont rouges :

Considérez également en quoi cela diffère de li.new: nième enfant (pair) qui cible les nouveaux éléments, mais seulement s'ils sont pairs. Il s'agirait des éléments 2 et 6 dans l'exemple ci-dessus.

Travailler avec le sélecteur :nth-child()

Vous pouvez réaliser des conceptions uniques en utilisant le sélecteur :nth-child(). Vous pouvez créer des sites Web colorés et mettre en évidence des lignes et des colonnes dans des tableaux de données. Le combiner avec d’autres sélecteurs CSS vous aidera à créer des mises en page et des conceptions complexes.