Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lernen Herausforderung: Übung Zu Strukturellen Pseudoklassen | Das CSS-Box-Modell und Abstandselemente
Learn
Kurse
Learning Tracks
Popular Topics
Practice
Projects
Quizzes & Challenges
Quizzes
Challenges
/
CSS-Grundlagen

bookHerausforderung: Übung Zu Strukturellen Pseudoklassen

Aufgabe

Wir arbeiten mit einer Gruppe von Elementen und das Ziel ist es, verschiedene Farben mithilfe von strukturellen Pseudoklassen anzuwenden. Ihre Aufgabe ist wie folgt:

  • 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.html

index.css

index.css

copy
  • :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.html

index.css

index.css

copy

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 6

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

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?

bookHerausforderung: Übung Zu Strukturellen Pseudoklassen

Swipe um das Menü anzuzeigen

Aufgabe

Wir arbeiten mit einer Gruppe von Elementen und das Ziel ist es, verschiedene Farben mithilfe von strukturellen Pseudoklassen anzuwenden. Ihre Aufgabe ist wie folgt:

  • 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.html

index.css

index.css

copy
  • :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.html

index.css

index.css

copy

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 6
some-alt