Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Apprendre Défi : S’exercer aux Pseudo-Classes Structurelles | Le Modèle de Boîte CSS et l'Espacement des Éléments
Fondamentaux De CSS

bookDé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.html

index.css

index.css

copy
  • :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.html

index.css

index.css

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 6

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

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

bookDé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.html

index.css

index.css

copy
  • :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.html

index.css

index.css

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 6
some-alt