Aufgabe A10

Selektor	Syntax	Wählt aus …
Tag-Selektor	`p { … }`	Alle `<p>`-Elemente
Klassen-Selektor	`.hinweis { … }`	Alle Elemente mit `class="hinweis"`
ID-Selektor	`#einleitung { … }`	Das Element mit `id="einleitung"`
Nachfahren-Selektor	`nav a { … }`	Alle `<a>` innerhalb von `<nav>`
Kind-Selektor	`ul > li { … }`	Direkte `<li>`-Kinder einer `<ul>`
Pseudoklasse :hover	`a:hover { … }`	Link, über den die Maus fährt
Pseudoklasse :nth-child	`tr:nth-child(even) { … }`	Jede zweite Tabellenzeile
Mehrfachselektor	`h1, h2, h3 { … }`	Alle Überschriften h1, h2 und h3

Teil A – Klassen einsetzen

Füge in erde.html eine CSS-Klasse .wichtig ein, die einen Hinweiskasten gestaltet (z. B. farbiger Rand links, andersfarbiger Hintergrund):

/* In style.css oder im <style>-Block */
.wichtig {
    background-color: #fff9db;
    border-left: 4px solid #c89f00;
    padding: 0.7em 1em;
    margin: 1em 0;
}

Wende die Klasse im HTML an:

<p class="wichtig">Achtung: Humus braucht Jahrzehnte zur Entstehung,
kann aber durch Erosion schnell verloren gehen.</p>

Teil B – Tabellen mit Pseudoklassen stylen

Ergänze in style.css Regeln, damit Tabellen besser aussehen:

th {
    background-color: #333;
    color: #fff;
}

tr:nth-child(even) td {
    background-color: #f0f0f0;
}

tr:hover td {
    background-color: #ddeeff;
}

Teste das in deiner luft.html.

Teil C – Navigation stylen mit Pseudoklassen

Gestalte die Navigation auf der Startseite. Ziel: Links sollen sich beim Hover-Zustand sichtbar verändern. Füge in style.css ein:

nav a {
    display: inline-block;
    padding: 0.3em 0.7em;
    border-radius: 4px;
    transition: background-color 0.2s;
}

nav a:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

Teil D – ID für die Einleitung

Vergib dem ersten Absatz auf index.html eine ID und style ihn gesondert:

<!-- HTML -->
<p id="einleitung">Die vier Elemente …</p>

/* CSS */
#einleitung {
    font-size: 1.15em;
    font-style: italic;
    color: #555;
}

💡 Klasse vs. ID:
class kann auf mehrere Elemente angewendet werden → .hinweis
id darf pro Seite nur einmal vorkommen → #einleitung

IDs haben in CSS auch eine höhere Spezifität als Klassen – bei Konflikten „gewinnt" die ID.

Zusatzaufgabe

Ergänze auf wasser.html CSS für figure und figcaption, sodass die Bildunterschrift kleiner und grau erscheint: