Pseudo-classes structurelles
Fait partie de la section CSS Mastery du Journey HTML de Coddy — leçon 12 sur 43.
Les pseudo-classes de structure en CSS sont utilisées pour styler des éléments en fonction de leur position ou de leur structure au sein du document HTML. Elles vous permettent de sélectionner des éléments tels que le premier enfant, le dernier enfant ou des enfants numérotés spécifiques sans avoir besoin de classes ou d'ID supplémentaires.
Les exemples courants incluent :
:first-child— sélectionne le premier enfant d'un parent.
:last-child— sélectionne le dernier enfant d'un parent.:nth-child(n)— sélectionne le n-ième enfant (par exemple, tous les 2e, 3e, etc.).
Testez-vousCette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.
Testez-vousCette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.
Testez-vousCette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.
Aide-mémoire
Les pseudo-classes structurelles stylisent les éléments en fonction de leur position dans le document HTML :
:first-child— sélectionne le premier enfant d'un parent:last-child— sélectionne le dernier enfant d'un parent:nth-child(n)— sélectionne le n-ième enfant (par exemple, tous les 2èmes, 3èmes, etc.)
Essayez vous-même
Cette leçon ne comprend pas de défi de code.
Testez-vousCette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.
Toutes les leçons de CSS Mastery
1Maîtrise des sélecteurs – Combinaisons
IntroductionSélecteur de descendantSélecteur d'enfantSélecteur de frère adjacentSélecteur de frère généralDéfi récapitulatif7Construire avec CSS Grid
Les bases de GridPlacement d'éléments Grid-rowZones nomméesDéfi récapitulatif2Pseudo-classes interactives
Pseudo-classesEffets de survolEffets de focusStyles actifsDéfi récapitulatif3Pseudo-classes structurelles
Pseudo-classes structurellesCibler le premier enfantCibler le dernier enfantLa puissance des motifs : utiliser nth-childDéfi récapitulatif