Pseudoklassen: Struktur

Einfache Pseudoklassen
HTML-Dokument mit den erforderlichen CSS-Angaben
HTML-Dokument im Browser mit den erforderlichen CSS-Angaben

Laden Sie hier das HTML-Dokument herunter. Darin ist bereits eine CSS-Datei style.css referenziert.

Erstellen Sie die Datei style.css. Lösen sie diese Aufgabe, indem Sie nur die notwendigen CSS-Angaben ergänzen, verändern Sie nichts im HTML-Dokument. Nutzen Sie insbesondere für Ihre CSS-Regeln keine Ids oder Klassen, sondern lediglich Pseudoklassen.

Setzen Sie mit den Pseudoklassen das folgende Layout um (Abbildung):

  • Alle Kinder der sortierten Listen, die an erster Stelle stehen, haben eine blaue Schriftfarbe.
  • Alle Kinder der sortierten Listen, die an letzter Stelle stehen, haben eine grüne Schriftfarbe.
  • Alle Kinder der sortierten Listen, die an der dritten Stelle stehen, haben eine rote Schriftfarbe.
  • Das erste Kind der unsortierten Liste hat eine eigene Hintergrundfarbe.
  • Das zweite Kind der unsortierten Liste hat eine weitere Hintergrundfarbe, die sich von der des ersten Kindes unterscheidet.
Kontrolle der eigenen Lösung
Überprüfen Sie hier Ihre Lösung. Sie sind mit dieser Teilaufgabe erst fertig, wenn die Tests keine Fehler zeigen und Ihre Boxen aussehen wie in der Abbildung.
Optional: Komplexere Strukturen mit Pseudoklassen
HTML-Dokument mit den erforderlichen CSS-Angaben
HTML-Dokument im Browser mit den erforderlichen CSS-Angaben

Laden Sie hier das HTML-Dokument herunter. Darin ist bereits eine CSS-Datei style.css referenziert.

Entfernen Sie aus der HTML_Dateien jegliche Id- und Klassenangaben.

Erstellen Sie die Datei style.css. Lösen sie diese Aufgabe, indem Sie für Ihre CSS-Regeln keine Ids oder Klassen, sondern höchstens Pseudoklassen benutzen.

Hinterlegen Sie so wenige CSS-Regeln wie möglich, damit die folgenden Anforderungen erfüllt sind:

  • Wenn keine Ausnahmen definiert sind, ist die Schriftfarbe rot.
  • Die Schriftfarbe aller Inhalte von unsortierten Listen ist dunkelblau.
  • Unsortierte Listen haben einen hellblauen Hintergrund, sortierte Listen einen hellrosanen Hintergrund.
  • Sowohl unsortierte als auch sortierte Listen haben ein Padding: padding: 10px 0px 10px 40px;
  • Unsortierte Listen haben zudem einen oberen Außenrand: margin-top: 30px;
  • Der Listeneintrag "Montag" hat eine schwarze Schriftfarbe.
  • Die Listeneinträge "Dienstag" und "Donnerstag" haben eine rote Schriftfarbe.
  • Der Listeneintrag "Samstag" hat eine grüne Schriftfarbe.
Kontrolle der eigenen Lösung
Überprüfen Sie hier Ihre Lösung. Sie sind mit dieser Aufgabe erst fertig, wenn die Tests keine Fehler zeigen und Ihre Boxen aussehen wie in der Abbildung.