← Article précédent Article suivant →
Publié le 19 juin 2016

Aujourd'hui on se retrouve pour parler d'une pseudo-classe pas assez utilisée, j'ai nommé :nth-child()

Sélecteur != Pseudo-Classe


Tout d'abord, un petit point à propos de la différence entre ces deux concepts.
Un sélecteur en CSS va vous permettre de sélectionner un élément à styliser, par exemple à travers un ID "#mon-id" ou une classe ".ma-classe" (cf CSS Selectors - CSS | MDN).
Une pseudo-classe est un mot-clé que l'on va souvent venir ajouter à un sélecteur afin de cibler un élément qu'un sélecteur ne peut pas sélectionner car non accessible directement dans notre structure HTML. Nous pouvons voir les pseudos-classes comme étant des états car nous pouvons par exemple dire "lorsque le lien est survolé" (ici pour la pseudo-classe :hover).

:nth-child() c'est quoi ?


Dans le cas de la pseudo-classe :nth-child(), nous pouvons par exemple vouloir sélectionner un élément "lorsque celui-ci est le troisième enfant" :
li:nth-child(3) {
	/* Votre style */
}
Ou encore, cibler un élément une fois sur deux via le paramètre odd pour impair ou even pour pair :
.row:nth-child(even) {
	/* Votre style */
}
N'hésitez-pas à visionner la vidéo pour plus d'exemples concernant l'utilisation de :nth-child().

Vous pouvez également télécharger le code source se trouvant dans la vidéo.

Retrouvez-moi sur les réseaux sociaux