Introduction au sélecteur CSS nth-child

Aujourd’hui, nous allons apprendre les bases du CSS. J’ai tendance à utiliser les sélecteurs CSS nth-child dans mes articles.

Mais cela m’a fait réaliser que je n’ai pas vraiment revu les bases de l’utilisation des sélecteurs css nth-child, nth-child est une pseudo-classe CSS qui permets de pouvoir sélectionner des éléments.

Aujourd’hui, nous allons explorer les options de ce puissant sélecteur CSS à l’aide de quelques exemples.

Commençons par quelques sélecteurs css nth-child de base :

Nous pouvons définir le numéro d’un élément que nous voulons sélectionner. Disons que nous voulons sélectionner le troisième élément de la liste.

.article-list li:nth-child(3) {
    	color: green;
}

<ul class="article-list">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>

Le résultat est que seul le troisième élément est en vert

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

Sélecteur Odd/Even

Nous pouvons sélectionner chaque numéro d’élément pair ou impair en utilisant odd et even.

.article-list-odd li:nth-child(odd) {
    	color: green;
}

<ul class="article-list-odd">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>

Le résultat est que seuls les éléments impairs sont sélectionnés :

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

et nth-child(even) pour les résultats pairs :

.article-list-even li:nth-child(even) {
    	color: red;
}

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

Tous les X éléments

Ce que l’on peut faire avec le sélecteur nth-child, c’est sélectionner tous les x éléments. Disons, par exemple, que nous voulons sélectionner chaque quatrième élément :

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

Maintenant, chaque 4ème élément enfant est sélectionné :

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9

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

Et si nous voulons inclure le premier élément :

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9

Ou le second élément :

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

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9
• Item 10

Sélectionnez les x premiers éléments

Nous pouvons même utiliser un sélecteur qui sélectionne toutes les balises sauf les trois premiers éléments.

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

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9
• Item 10

Sélectionnez tous les éléments sauf les x premiers éléments

Nous pouvons même utiliser un sélecteur qui sélectionne toutes les balises sauf les trois premiers éléments.

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

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9
• Item 10

Sélectionnez le premier ou dernier élément

Nous pouvons même sélectionner le premier ou le dernier élément avec :first-child et :last-child

... li:first-child {
	color: red;
}
... li:last-child {
	color: blue;
}

• Item 1
• Item 2
• Item 3

• Item 1
• Item 2
• Item 3

Avec cela, nous pouvons également compenser pour obtenir l’avant-dernier élément de la liste.

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

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

Combinaison de sélecteurs

Nous pouvons également combiner les sélecteurs nth-child !

Disons que vous voulez obtenir tous les nombres pairs d’une liste de nombres impairs.

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

<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>

Conclusion

J’espère que cet article vous aidera pendant l’intégration de vos sites avec le pseudo classe nth-child. Si vous voulez voir quelles autres pseudo classes css existent, vous pouvez consultez les articles suivants :

• pseudo-classe CSS :not
• pseudo-classe CSS :where
• pseudo-classe CSS :empty