Challenge: Practice Structural Pseudo-Classes
Task
We are working with a set of elements, and the goal is to practice applying different colors using structural pseudo-classes. Your task is as follows:
- Apply the color
redto the first element using a structural pseudo-class. - Apply the color
blueto the last element using a structural pseudo-class. - Apply the color
greento every second element using a structural pseudo-class.
index.html
index.css
:first-child: Targets the first child of a parent element.:last-child: Targets the last child of a parent element.:nth-child(): Targets a specific child of a parent element based on its position in the list. For instance, to select every second list item (2, 4, 6, etc.), you can use:nth-child(2n).
index.html
index.css
Everything was clear?
Thanks for your feedback!
SectionΒ 3. ChapterΒ 6
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
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?
Awesome!
Completion rate improved to 2.56Challenge: Practice Structural Pseudo-Classes
Swipe to show menu
Task
We are working with a set of elements, and the goal is to practice applying different colors using structural pseudo-classes. Your task is as follows:
- Apply the color
redto the first element using a structural pseudo-class. - Apply the color
blueto the last element using a structural pseudo-class. - Apply the color
greento every second element using a structural pseudo-class.
index.html
index.css
:first-child: Targets the first child of a parent element.:last-child: Targets the last child of a parent element.:nth-child(): Targets a specific child of a parent element based on its position in the list. For instance, to select every second list item (2, 4, 6, etc.), you can use:nth-child(2n).
index.html
index.css
Everything was clear?
Thanks for your feedback!
SectionΒ 3. ChapterΒ 6
