Défi : S’exercer aux Pseudo-Classes Structurelles
Tâche
Nous travaillons avec un ensemble d’éléments, et l’objectif est de s’exercer à appliquer différentes couleurs à l’aide de pseudo-classes structurelles. Votre tâche est la suivante :
- Appliquer la couleur
red
au premier élément en utilisant une pseudo-classe structurelle. - Appliquer la couleur
blue
au dernier élément en utilisant une pseudo-classe structurelle. - Appliquer la couleur
green
à chaque deuxième élément en utilisant une pseudo-classe structurelle.
index.html
index.css
:first-child
: Cible le premier enfant d’un élément parent.:last-child
: Cible le dernier enfant d’un élément parent.:nth-child()
: Cible un enfant spécifique d’un élément parent selon sa position dans la liste. Par exemple, pour sélectionner chaque deuxième élément de liste (2, 4, 6, etc.), vous pouvez utiliser:nth-child(2n)
.
index.html
index.css
Tout était clair ?
Merci pour vos commentaires !
Section 3. Chapitre 6
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Awesome!
Completion rate improved to 2.56
Défi : S’exercer aux Pseudo-Classes Structurelles
Glissez pour afficher le menu
Tâche
Nous travaillons avec un ensemble d’éléments, et l’objectif est de s’exercer à appliquer différentes couleurs à l’aide de pseudo-classes structurelles. Votre tâche est la suivante :
- Appliquer la couleur
red
au premier élément en utilisant une pseudo-classe structurelle. - Appliquer la couleur
blue
au dernier élément en utilisant une pseudo-classe structurelle. - Appliquer la couleur
green
à chaque deuxième élément en utilisant une pseudo-classe structurelle.
index.html
index.css
:first-child
: Cible le premier enfant d’un élément parent.:last-child
: Cible le dernier enfant d’un élément parent.:nth-child()
: Cible un enfant spécifique d’un élément parent selon sa position dans la liste. Par exemple, pour sélectionner chaque deuxième élément de liste (2, 4, 6, etc.), vous pouvez utiliser:nth-child(2n)
.
index.html
index.css
Tout était clair ?
Merci pour vos commentaires !
Section 3. Chapitre 6