CSS Selektoren verstehen

Selektoren sind der Schluessel zu CSS. Sie bestimmen, welche Elemente gestylt werden. In diesem Kapitel lernst du alle wichtigen Selektoren kennen — von den einfachsten bis zu den maechtigsten.

Die Grundselektoren

Element-Selektor

Waehlt alle Elemente eines bestimmten Typs:

/* Alle Absaetze */
p {
    color: #333;
    line-height: 1.6;
}

/* Alle Ueberschriften */
h1 {
    font-size: 2.5rem;
}

/* Alle Links */
a {
    color: #264de4;
}

Klassen-Selektor

Waehlt Elemente mit einer bestimmten Klasse (.):

<p class="highlight">Wichtiger Text</p>
<p>Normaler Text</p>
<p class="highlight">Noch ein wichtiger Text</p>

.highlight {
    background-color: #fff3cd;
    padding: 0.5rem;
    border-left: 4px solid #ffc107;
}

Ein Element kann mehrere Klassen haben:

<div class="card featured large">Inhalt</div>

.card { border: 1px solid #ddd; padding: 1rem; }
.featured { border-color: #e44d26; }
.large { font-size: 1.2rem; }

ID-Selektor

Waehlt ein einzelnes Element mit einer bestimmten ID (#):

<header id="main-header">
    <h1>Meine Seite</h1>
</header>

#main-header {
    background: #1a1a2e;
    color: white;
    padding: 2rem;
}

Wichtig: IDs muessen auf einer Seite einzigartig sein. Bevorzuge Klassen fuer Styling!

Universalselektor

Waehlt alle Elemente:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Vergleich: Element vs. Klasse vs. ID

Selektor	Symbol	Spezifitaet	Wiederverwendbar	Verwendung
Element	keins	Niedrig (0,0,1)	Ja	Grundstyle
Klasse	.	Mittel (0,1,0)	Ja	Hauptsaechlich
ID	#	Hoch (1,0,0)	Nein	Selten fuer CSS

Kombinatoren

Kombinatoren verbinden Selektoren, um spezifischere Auswahlen zu treffen.

Nachfahren-Selektor (Leerzeichen)

Waehlt alle Nachfahren (auch verschachtelte):

/* Alle Links innerhalb der Navigation */
nav a {
    text-decoration: none;
    color: white;
}

/* Alle <li> innerhalb von <ul> innerhalb von <nav> */
nav ul li {
    display: inline-block;
}

Kind-Selektor (>)

Waehlt nur direkte Kinder:

/* Nur direkte <li> von <ul>, nicht verschachtelte */
ul > li {
    margin-bottom: 0.5rem;
}

<ul>
    <li>Direkt (wird gestylt)</li>
    <li>Direkt (wird gestylt)
        <ul>
            <li>Verschachtelt (wird NICHT gestylt)</li>
        </ul>
    </li>
</ul>

Nachbar-Selektor (+)

Waehlt das direkt folgende Geschwisterelement:

/* Der Absatz direkt nach einer h2 */
h2 + p {
    font-size: 1.2rem;
    color: #666;
}

Allgemeiner Geschwister-Selektor (~)

Waehlt alle folgenden Geschwisterelemente:

/* Alle Absaetze nach einer h2 (auf gleicher Ebene) */
h2 ~ p {
    margin-left: 1rem;
}

Attribut-Selektoren

Waehle Elemente basierend auf ihren Attributen:

/* Element hat ein Attribut */
[required] {
    border-color: #e44d26;
}

/* Attribut hat einen bestimmten Wert */
[type="email"] {
    background-image: url('email-icon.svg');
}

/* Attribut beginnt mit einem Wert */
[href^="https"] {
    color: green; /* Sichere Links */
}

/* Attribut endet mit einem Wert */
[href$=".pdf"] {
    color: red; /* PDF-Links */
}

/* Attribut enthaelt einen Wert */
[class*="btn"] {
    cursor: pointer; /* Alle Button-Klassen */
}

Praktisches Beispiel

/* Externe Links markieren */
a[href^="http"]::after {
    content: " ↗";
    font-size: 0.8em;
}

/* Download-Links stylen */
a[download] {
    padding: 0.5rem 1rem;
    background: #e44d26;
    color: white;
    border-radius: 4px;
}

/* Pflichtfelder hervorheben */
input[required] {
    border-left: 3px solid #e44d26;
}

Gruppierung

Mehrere Selektoren mit denselben Styles gruppieren:

/* Statt: */
h1 { font-family: 'Georgia', serif; }
h2 { font-family: 'Georgia', serif; }
h3 { font-family: 'Georgia', serif; }

/* Besser: */
h1, h2, h3 {
    font-family: 'Georgia', serif;
}

Spezifitaet (Specificity)

Wenn mehrere Regeln auf dasselbe Element zutreffen, gewinnt die spezifischere:

Die Spezifitaet berechnen

Zaehle die Anzahl der verschiedenen Selektortypen:

      (ID, Klasse, Element)

p           → (0, 0, 1)
.card       → (0, 1, 0)
#header     → (1, 0, 0)
p.card      → (0, 1, 1)
#header .nav a → (1, 1, 1)

Beispiel: Wer gewinnt?

/* Spezifitaet: (0, 0, 1) */
p {
    color: blue;
}

/* Spezifitaet: (0, 1, 0) -- GEWINNT */
.text {
    color: red;
}

/* Spezifitaet: (1, 0, 0) -- GEWINNT gegen beide */
#intro {
    color: green;
}

<p class="text" id="intro">Welche Farbe habe ich?</p>
<!-- Antwort: gruen (ID hat hoechste Spezifitaet) -->

Spezifitaet vermeiden

Halte deine Selektoren so einfach wie moeglich:

/* Zu spezifisch -- schwer zu ueberschreiben */
#main .content article > p.intro:first-child {
    color: blue;
}

/* Besser -- einfach und klar */
.article-intro {
    color: blue;
}

Die where() und is() Selektoren

Moderne CSS-Selektoren fuer elegantere Auswahlen:

/* :is() -- waehlt eines der Elemente (behaelt Spezifitaet) */
:is(h1, h2, h3) {
    font-family: 'Georgia', serif;
    line-height: 1.2;
}

/* :where() -- gleiche Funktion, aber Spezifitaet = 0 */
:where(h1, h2, h3) {
    font-family: 'Georgia', serif;
}

/* Praktisch fuer verschachtelte Selektoren */
:is(article, section, aside) p {
    line-height: 1.8;
}

/* Statt: */
article p, section p, aside p {
    line-height: 1.8;
}

Nesting (Verschachtelung)

Modernes CSS unterstuetzt natives Nesting — aehnlich wie in Sass:

/* Modernes CSS Nesting */
.card {
    padding: 1.5rem;
    border: 1px solid #ddd;
    border-radius: 8px;

    & h2 {
        color: #e44d26;
        margin-bottom: 0.5rem;
    }

    & p {
        color: #666;
    }

    &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    &.featured {
        border-color: #e44d26;
    }
}

Das ist gleichbedeutend mit:

.card { padding: 1.5rem; border: 1px solid #ddd; border-radius: 8px; }
.card h2 { color: #e44d26; margin-bottom: 0.5rem; }
.card p { color: #666; }
.card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.card.featured { border-color: #e44d26; }

Uebungen

Uebung 1: Selektoren-Training

Gegeben ist dieses HTML. Schreibe CSS-Selektoren fuer die beschriebenen Aufgaben:

<nav id="main-nav">
    <ul>
        <li><a href="/" class="active">Home</a></li>
        <li><a href="/about">Ueber uns</a></li>
        <li><a href="/kontakt">Kontakt</a></li>
    </ul>
</nav>
<main>
    <article class="post featured">
        <h2>Titel</h2>
        <p class="intro">Einleitung...</p>
        <p>Haupttext...</p>
    </article>
</main>

1. Waehle alle Links in der Navigation
2. Waehle nur den aktiven Link
3. Waehle den ersten Absatz im Artikel
4. Waehle den Artikel nur wenn er “featured” ist

Uebung 2: Spezifitaet berechnen

Berechne die Spezifitaet fuer jeden Selektor und bestimme, welche Farbe ein Element erhaelt.

Was kommt als Naechstes?

Im naechsten Kapitel lernst du alles ueber Farben und Schriften in CSS:

• Verschiedene Farbformate (HEX, RGB, HSL)
• Web Fonts einbinden
• Typografie-Grundlagen

Zusammenfassung

• Element-Selektoren (p), Klassen (.card) und IDs (#header) sind die Grundlagen
• Kombinatoren wie , >, +, ~ schaffen praezise Auswahlen
• Attribut-Selektoren ([type="email"]) waehlen nach HTML-Attributen
• Spezifitaet bestimmt, welche Regel gewinnt: ID > Klasse > Element
• :is() und :where() vereinfachen komplexe Selektoren
• CSS Nesting mit & macht verschachtelte Styles lesbarer

---