Apprendre Défi : S'exercer aux Pseudo-Classes Structurelles | Le Modèle de Boîte CSS et l'Espacement des Éléments

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.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 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.css

Tout était clair ?

Merci pour vos commentaires !

Section 3. Chapitre 6

Demandez à l'IA

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Suggested prompts:

Can you show me an example of how to use these pseudo-classes in CSS?

What kind of elements are we applying these styles to?

Can you explain how :nth-child(2n) works in more detail?

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.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 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.css

Tout était clair ?

Merci pour vos commentaires !

Section 3. Chapitre 6