Kapitel 5: CSS-Selektoren

Selektoren sind das Herzstück von CSS. Sie bestimmen, welche HTML-Elemente mit Stilen versehen werden. In diesem Kapitel lernen Sie die wichtigsten Selektoren!

5.1 Einfache Selektoren (Basis, 90%+ Nutzung)

Diese Selektoren werden am häufigsten verwendet. Lernen Sie sie zuerst!

1. Elementselektor (Tag-Selektor)

Wählt alle Elemente eines bestimmten Typs aus.

Syntax:

tagname {
    eigenschaft: wert;
}

Beispiel:

/* Alle <p>-Elemente auswählen */
p {
    color: #333333;
    line-height: 1.6;
}

/* Alle <h1>-Elemente auswählen */
h1 {
    color: blau;
    font-size: 36px;
}

/* Alle <a>-Elemente auswählen */
a {
    color: grün;
    text-decoration: none;
}

HTML-Beispiel:

<h1>Überschrift</h1> <!-- Wird blau -->
<p>Absatz 1</p> <!-- Wird dunkelgrau -->
<p>Absatz 2</p> <!-- Wird auch dunkelgrau -->
<a href="#">Link</a> <!-- Wird grün -->

2. Klassenselektor (Class-Selektor) - Am flexibelsten!

Wählt alle Elemente mit einer bestimmten Klasse aus. Verwenden Sie den Punkt (.) vor dem Klassennamen.

Syntax:

.klassenname {
    eigenschaft: wert;
}

Beispiel:

/* Alle Elemente mit der Klasse "highlight" auswählen */
.highlight {
    background-color: gelb;
    padding: 10px;
    border-left: 4px solid orange;
}

/* Alle Elemente mit der Klasse "button" auswählen */
.button {
    background-color: blau;
    color: weiß;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
}

HTML-Beispiel:

<p class="highlight">Dieser Absatz ist hervorgehoben.</p>
<div class="highlight">Auch dieses div ist hervorgehoben.</div>

<a href="#" class="button">Klick mich!</a>
<button class="button">Auch ich bin ein Button!</button>

💡 Warum Klassen so toll sind:

• ✅ Können auf mehreren Elementen verwendet werden
• ✅ Können mehrere Klassen auf einem Element kombiniert werden
• ✅ Wiederverwendbar und wartbar

3. ID-Selektor (ID-Selektor)

Wählt ein einzigartiges Element aus. Verwenden Sie die Raute (#) vor dem ID-Namen.

Syntax:

#id-name {
    eigenschaft: wert;
}

Beispiel:

/* Das Element mit der ID "header" auswählen */
#header {
    background-color: #333333;
    color: weiß;
    padding: 20px;
    text-align: center;
}

/* Das Element mit der ID "main-content" auswählen */
#main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

HTML-Beispiel:

<header id="header">
    <h1>Meine Webseite</h1>
</header>

<main id="main-content">
    <p>Hier ist der Hauptinhalt.</p>
</main>

⚠️ Wichtige Regel:

• IDs sollten einmalig sein (nur einmal pro Seite verwendet)
• Verwenden Sie Klassen, wenn Sie den Stil auf mehreren Elementen anwenden möchten

4. Universalselektor (*)

Wählt alle Elemente auf der Seite aus.

Syntax:

* {
    eigenschaft: wert;
}

Beispiel:

/* Alle Elemente zurücksetzen */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

💡 Wann verwenden?

• ✅ Zum Zurücksetzen von Standard-Stilen (CSS Reset)
• ❌ Nicht für normale Stile (wirkt sich auf alle Elemente aus - kann die Leistung beeinträchtigen)

5.2 Kombinierte Selektoren (Code vereinfachen)

Kombinierte Selektoren ermöglichen eine präzisere Auswahl.

1. Nachfahren-Selektor (Leerzeichen getrennt)

Wählt alle Elemente aus, die innerhalb eines anderen Elements liegen (egal wie tief).

Syntax:

vorfahre nachfahre {
    eigenschaft: wert;
}

Beispiel:

/* Alle <p>-Elemente innerhalb von <div> auswählen */
div p {
    color: blau;
    margin-bottom: 15px;
}

/* Alle <a>-Elemente innerhalb von <nav> auswählen */
nav a {
    color: weiß;
    text-decoration: none;
    margin-right: 15px;
}

HTML-Beispiel:

<div>
    <p>Dieser Absatz ist blau.</p> <!-- Gewählt -->
    <section>
        <p>Auch dieser Absatz ist blau.</p> <!-- Gewählt (tiefer Nachfahre) -->
    </section>
</div>

<nav>
    <a href="#">Startseite</a> <!-- Gewählt -->
    <a href="#">Über uns</a> <!-- Gewählt -->
</nav>

2. Kind-Selektor (> getrennt)

Wählt nur die direkten Kinder eines Elements aus (nicht tiefer liegende Elemente).

Syntax:

eltern-element > kind-element {
    eigenschaft: wert;
}

Beispiel:

/* Nur direkte <p>-Kinder von <div> auswählen */
div > p {
    color: grün;
    font-weight: bold;
}

HTML-Beispiel:

<div>
    <p>Dieser Absatz ist grün und fett.</p> <!-- Gewählt (direktes Kind) -->
    <section>
        <p>Dieser Absatz ist nicht grün.</p> <!-- Nicht gewählt (Enkel) -->
    </section>
</div>

3. Angrenzender Geschwister-Selektor (+ getrennt)

Wählt das direkt folgende Geschwister-Element aus.

Syntax:

element + geschwister-element {
    eigenschaft: wert;
}

Beispiel:

/* Das erste <p>-Element nach einer <h1> auswählen */
h1 + p {
    font-size: 20px;
    color: #666666;
}

HTML-Beispiel:

<h1>Überschrift</h1>
<p>Dieser Absatz ist 20px groß.</p> <!-- Gewählt -->
<p>Dieser Absatz ist normal.</p> <!-- Nicht gewählt -->

4. Vereinigungs-Selektor (, getrennt)

Wählt mehrere Elemente gleichzeitig aus.

Syntax:

selektor1, selektor2, selektor3 {
    eigenschaft: wert;
}

Beispiel:

/* Alle <h1>, <h2> und <h3> gleichzeitig auswählen */
h1, h2, h3 {
    font-family: 'Arial', sans-serif;
    color: #333333;
    margin-bottom: 15px;
}

HTML-Beispiel:

<h1>Überschrift 1</h1> <!-- Gewählt -->
<h2>Überschrift 2</h2> <!-- Gewählt -->
<h3>Überschrift 3</h3> <!-- Gewählt -->
<p>Absatz</p> <!-- Nicht gewählt -->

5.3 Pseudo-Klassen-Selektoren (Spezielle Zustände)

Pseudo-Klassen wählen Elemente basierend auf einem bestimmten Zustand aus.

1. Link-Pseudo-Klassen (Für Links)

• :link - Noch nicht besuchte Links
• :visited - Bereits besuchte Links
• :hover - Wenn man mit der Maus darüber fährt
• :active - Wenn man darauf klickt

Beispiel:

/* Noch nicht besuchter Link */
a:link {
    color: blau;
    text-decoration: none;
}

/* Bereits besuchter Link */
a:visited {
    color: lila;
}

/* Wenn man mit der Maus darüber fährt */
a:hover {
    color: rot;
    text-decoration: underline;
}

/* Wenn man darauf klickt */
a:active {
    color: grün;
}

2. Struktur-Pseudo-Klassen

• :first-child - Erstes Kind-Element
• :last-child - Letztes Kind-Element
• :nth-child(n) - n-tes Kind-Element

Beispiel:

/* Erstes <li>-Element in einer Liste */
li:first-child {
    font-weight: bold;
    color: rot;
}

/* Letztes <li>-Element in einer Liste */
li:last-child {
    border-bottom: keine;
}

/* Jedes zweite <li>-Element (gerade Zahlen) */
li:nth-child(even) {
    background-color: #f0f0f0;
}

/* Jedes erste, dritte, fünfte... <li>-Element (ungerade Zahlen) */
li:nth-child(odd) {
    background-color: #ffffff;
}

HTML-Beispiel:

<ul>
    <li>Element 1</li> <!-- Fett und rot -->
    <li>Element 2</li> <!-- Heller Hintergrund -->
    <li>Element 3</li> <!-- Weißer Hintergrund -->
    <li>Element 4</li> <!-- Heller Hintergrund -->
    <li>Element 5</li> <!-- Weißer Hintergrund, kein Rand unten -->
</ul>

5.4 Selektoren-Priorität (Spezifität)

Was passiert, wenn mehrere Selektoren auf dasselbe Element zutreffen? Wer "gewinnt"?

🏆 Prioritätsreihenfolge (von hoch zu niedrig)

1. Inline-Stile (style="") - 1000 Punkte
2. ID-Selektoren (#id) - 100 Punkte
3. Klassen-Selektoren (.klasse) - 10 Punkte
4. Element-Selektoren (tag) - 1 Punkt
5. Universalselektor (*) - 0 Punkte

🎯 Beispiel: Prioritäts-Berechnung

/* 1 Punkt (Element-Selektor) */
p {
    color: grau;
}

/* 10 Punkte (Klassen-Selektor) */
.text {
    color: blau;
}

/* 11 Punkte (Element + Klasse) */
p.text {
    color: grün;
}

/* 100 Punkte (ID-Selektor) */
#content {
    color: rot;
}

/* 101 Punkte (ID + Element) */
#content p {
    color: lila;
}

HTML:

<p id="content" class="text">Welche Farbe hat dieser Text?</p>

Ergebnis: Der Text ist lila, weil #content p die höchste Priorität hat (101 Punkte).

💡 Wichtige Regeln

1. Höhere Priorität gewinnt
2. Bei gleicher Priorität gewinnt der spätere Stil (unten in der Datei)
3. !important erzwingt Priorität (sollte vermieden werden!)

p {
    color: blau !important; /* Erzwingt blau, egal was andere sagen */
}

5.5 Praxis: Navigation und Listenelemente stylen

Lassen Sie uns ein praktisches Beispiel erstellen!

🎯 Aufgabe

Erstellen Sie eine Navigationsleiste und eine Liste, und stylen Sie sie mit verschiedenen Selektoren.

📄 Lösung

HTML (index.html):

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Selektoren Übung</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Navigationsleiste -->
    <nav class="haupt-nav">
        <ul>
            <li><a href="#">Startseite</a></li>
            <li><a href="#">Über uns</a></li>
            <li><a href="#">Dienstleistungen</a></li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </nav>
    
    <!-- Liste mit Artikeln -->
    <div class="artikel-liste">
        <h2>Neueste Artikel</h2>
        <ul>
            <li class="highlight">CSS lernen ist einfach!</li>
            <li>HTML Grundlagen</li>
            <li class="highlight">JavaScript für Anfänger</li>
            <li>Responsive Webdesign</li>
        </ul>
    </div>
</body>
</html>

CSS (style.css):

/* ===== Navigationsleiste ===== */

/* Alle <li>-Elemente in der Navigation auswählen */
.haupt-nav li {
    display: inline;
    margin-right: 20px;
}

/* Alle <a>-Elemente in der Navigation auswählen */
.haupt-nav a {
    text-decoration: none;
    color: #333333;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 5px;
}

/* Wenn man mit der Maus über einen Link fährt */
.haupt-nav a:hover {
    background-color: #333333;
    color: weiß;
}

/* Erstes <li>-Element in der Navigation fett machen */
.haupt-nav li:first-child a {
    color: #4CAF50;
}

/* ===== Artikelliste ===== */

/* Die Überschrift der Artikelliste stylen */
.artikel-liste h2 {
    color: #3366cc;
    border-bottom: 2px solid #3366cc;
    padding-bottom: 10px;
}

/* Alle <li>-Elemente in der Artikelliste auswählen */
.artikel-liste li {
    padding: 10px;
    margin-bottom: 5px;
    background-color: #f9f9f9;
    border-left: 4px solid #cccccc;
}

/* Alle <li>-Elemente mit der Klasse "highlight" auswählen */
.artikel-liste li.highlight {
    background-color: #ffffcc;
    border-left-color: #ffcc00;
    font-weight: bold;
}

/* Letztes <li>-Element in der Artikelliste */
.artikel-liste li:last-child {
    margin-bottom: 0;
    border-bottom: keine;
}

🔍 Erklärung:

1. .haupt-nav li: Wählt alle <li>-Elemente aus, die innerhalb eines Elements mit der Klasse haupt-nav liegen
2. .haupt-nav a:hover: Wählt <a>-Elemente aus, wenn man mit der Maus darüber fährt
3. .haupt-nav li:first-child a: Wählt den ersten <a>-Link in der Navigation aus
4. .artikel-liste li.highlight: Wählt <li>-Elemente aus, die sowohl die Klasse highlight haben als auch innerhalb von .artikel-liste liegen

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ Einfache Selektoren (Element, Klasse, ID, Universal)
• ✅ Kombinierte Selektoren (Nachfahre, Kind, Geschwister, Vereinigung)
• ✅ Pseudo-Klassen-Selektoren (Link-Zustände, Struktur)
• ✅ Selektoren-Priorität (Spezifität)
• ✅ Praktische Anwendung auf Navigation und Listen

🎯 Nächste Schritte

Im nächsten Kapitel werden wir:

1. Textstile erlernen (Schriftarten, Größen, Farben, Ausrichtung)
2. Typografie verbessern
3. Lesbare und schöne Texte gestalten

Bereit für mehr? Los geht's! 🎨