Herausforderung: Übung Zu Strukturellen Pseudoklassen
Aufgabe
Wir arbeiten mit einer Reihe von Elementen. Ziel ist es, verschiedene Farben mithilfe von strukturellen Pseudoklassen anzuwenden. Ihre Aufgabe lautet:
- Wenden Sie die Farbe
red
auf das erste Element mithilfe einer strukturellen Pseudoklasse an. - Wenden Sie die Farbe
blue
auf das letzte Element mithilfe einer strukturellen Pseudoklasse an. - Wenden Sie die Farbe
green
auf jedes zweite Element mithilfe einer strukturellen Pseudoklasse an.
index.html
index.css
:first-child
: Wählt das erste Kind eines Elternelements aus.:last-child
: Wählt das letzte Kind eines Elternelements aus.:nth-child()
: Wählt ein bestimmtes Kind eines Elternelements basierend auf seiner Position in der Liste aus. Um beispielsweise jedes zweite Listenelement (2, 4, 6, usw.) auszuwählen, kann:nth-child(2n)
verwendet werden.
index.html
index.css
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
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.56
Herausforderung: Übung Zu Strukturellen Pseudoklassen
Swipe um das Menü anzuzeigen
Aufgabe
Wir arbeiten mit einer Reihe von Elementen. Ziel ist es, verschiedene Farben mithilfe von strukturellen Pseudoklassen anzuwenden. Ihre Aufgabe lautet:
- Wenden Sie die Farbe
red
auf das erste Element mithilfe einer strukturellen Pseudoklasse an. - Wenden Sie die Farbe
blue
auf das letzte Element mithilfe einer strukturellen Pseudoklasse an. - Wenden Sie die Farbe
green
auf jedes zweite Element mithilfe einer strukturellen Pseudoklasse an.
index.html
index.css
:first-child
: Wählt das erste Kind eines Elternelements aus.:last-child
: Wählt das letzte Kind eines Elternelements aus.:nth-child()
: Wählt ein bestimmtes Kind eines Elternelements basierend auf seiner Position in der Liste aus. Um beispielsweise jedes zweite Listenelement (2, 4, 6, usw.) auszuwählen, kann:nth-child(2n)
verwendet werden.
index.html
index.css
Danke für Ihr Feedback!