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
redauf das erste Element mithilfe einer strukturellen Pseudoklasse an. - Wenden Sie die Farbe
blueauf das letzte Element mithilfe einer strukturellen Pseudoklasse an. - Wenden Sie die Farbe
greenauf 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
War alles klar?
Danke für Ihr Feedback!
Abschnitt 3. Kapitel 6
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
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
redauf das erste Element mithilfe einer strukturellen Pseudoklasse an. - Wenden Sie die Farbe
blueauf das letzte Element mithilfe einer strukturellen Pseudoklasse an. - Wenden Sie die Farbe
greenauf 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
War alles klar?
Danke für Ihr Feedback!
Abschnitt 3. Kapitel 6