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>- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
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 :
