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 des 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 en fonction de 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

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 des 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 en fonction de 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