Le sélecteur est l’essence même de CSS : comment cibler le bon élément sans créer d’effet de bord et en étant le plus précis et efficace possible. Ce tutoriel vidéo se concentre sur la pseudo-classe :nth-child().
Steven Sil, le formateur qui vous explique sur ce tuto CSS le b.a-ba de l’utilisation de cette pseudo classe vous propose un cas pratique que l’on a certainement tous rencontré : sélectionner une ligne ou une colone sur deux, sur trois, en commençant par la première, ou la deuxième…
Pour récapituler le contenu de cette vidéo de presque 5 min, en quelques lignes pour ceux qui ne pourraient pas la lire : L’auteur prend l’exemple d’une liste à puce ( ul > li ) et propose de sélectionner tous les éléments paires (deuxième, quatrième, etc.) avec le sélecteur li:nth-child(even). Les éléments paires sont sélectionnables grâce au mot-clé odd au lieu de even.
Il est également possible de mettre une fonction affine à la place de ce mot clé, composée de la sorte : ax+b. Par exemple li:nth-child(2n+1) équivaut à sélectionner une ligne sur 2 en sélectionnant la première. (équivalent de odd). li:nth-child(3n+1) permettrait de sélectionner une ligne sur 3 en commençant par la première.
Ce que la vidéo ne dit pas
Bien sûr il est toujours possible d’aller plus loin dans l’utilisation de ce type de pseudo-classe.
Sélectionner les N premiers éléments
Pour sélectionner les 3 premiers éléments d’une liste par exemple, il est possible d’utiliser comme sélecteur.
li:nth-child(-n+3) {
background: #bada55;
}Sélectionner uniquement le énième élément
Pour sélectionner le 3ème éléments d’une liste et uniquement celui-ci, il est possible d’utiliser comme sélecteur.
li:nth-child(3) {
background: #bada55;
}Combiné à d’autres sélecteurs et pseudo-classes, vous pourrez faire des merveilles !
Partager la publication "Améliorez votre CSS avec la pseudo-classe :nth-child()"
Bon tutoriel ici présenté, bien expliqué. Je suis un jeune étudiant en informatique dans le développement web et la programmation, je dois dire que ça fait plaisir de tomber sur des vidéos comme celles-ci pour apprendre. Je ne connaissais pas cette fonction, l’occasion pour moi de l’essayer un de ses quatre. Merci pour ce petit investissement.
Cordialement. 🙂
Je ne connaissais pas ! Mais c’est pratique, merci pour cette astuce Geoffrey 😉
Bonjour,
En sus de li:nth-child(2n+1) pour sélectionner une ligne sur deux en sélectionnant la première, il serait également utile de mentionner la syntaxe complémentaire à utiliser pour sélectionner une ligne sur deux en commençant par la seconde.
Merci.
Je crois avoir trouvé : C’est ol li:nth-child(2n), non ?
En tout cas, ça marche, mais merci de confirmer.
Sinon, il serait bon de consacrer également un article à :nth-of-type. Les syntaxes sont les mêmes, mais l’emploi est plus facile et plus « universel », car cette pseudo classe permet de cibler des éléments d’un type donné mais séparés par d’autres.
Ou ol li:nth-child(2n+0).
La solution était sur Mozilla Developer Network. Ah, là ll, maudite soit mon impatience :
https://developer.mozilla.org/fr/docs/Web/CSS/:nth-child.