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
CSS-Grundlagen

bookHerausforderung: Ü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.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?

Awesome!

Completion rate improved to 2.56

bookHerausforderung: Ü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.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