Selektoren und die Cascade
Wählen Sie Elemente mit Typ-, Klassen-, ID- und Attributselektoren aus. Verstehen Sie Spezifität, Vererbung und die Cascade, um vorherzusagen, welche Stile Vorrang haben.
Selektoren und die Cascade ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist CSS?
CSS (Cascading Style Sheets) ist die Sprache, die die visuelle Darstellung steuert. Sie schreiben Regeln – jede Regel enthält einen Selektor, der Elemente auswählt, und einen Deklarationsblock mit Eigenschaft-Wert-Paaren.
selector {
property: value;
another-property: value;
}Typ-, Klassen- und ID-Selektoren
Die drei grundlegenden Selektoren: Typ wählt alle Elemente eines Tags aus (p), Klasse wählt Elemente mit einer Klasse aus (.card), ID wählt ein Element anhand seiner ID aus (#logo). Bevorzugen Sie Klassen – IDs haben eine sehr hohe Spezifität.
p { color: #333; } /* type */
.card { padding: 16px; } /* class */
#logo { width: 200px; } /* ID */Attribut- und Pseudoklassen-Selektoren
Wählen Sie anhand des Attributwerts mit [type="email"] aus. Verwenden Sie Pseudoklassen für Zustände: :hover, :focus, :active, :checked, :nth-child(), :first-child, :last-child.
input[type="email"] { border-color: blue; }
a:hover { text-decoration: underline; }
li:nth-child(odd) { background: #f5f5f5; }Kombinatoren
Kombinatoren beschreiben Beziehungen zwischen Elementen: Leerzeichen (Nachfahre), > (direktes Kindelement), + (benachbartes Geschwisterelement), ~ (allgemeines Geschwisterelement).
nav a { color: white; } /* descendant */
nav > ul { list-style: none; } /* child */
h2 + p { margin-top: 0; } /* adjacent sibling */Spezifität: Wer gewinnt?
Wenn mehrere Regeln dasselbe Element ansprechen, bestimmt die Spezifität, welche gewinnt. ID-Selektoren (0,1,0,0) schlagen Klassenselektoren (0,0,1,0), diese wiederum schlagen Typ-Selektoren (0,0,0,1). Inline-Stile schlagen alle anderen. !important schlägt alles – verwenden Sie es nur als letzten Ausweg.
Spezifität berechnen
Zählen Sie IDs, Klassen/Attribute/Pseudoklassen getrennt. Vergleichen Sie Spalte für Spalte. Beispiel: #nav .link:hover = (0,1,1,1). .nav a = (0,0,1,1). Der erste Selektor gewinnt.
/* Specificity: 0,0,1,1 — loses */
.nav a { color: red; }
/* Specificity: 0,1,1,1 — wins */
#nav .link:hover { color: blue; }Die Kaskade: Die Reihenfolge ist entscheidend
Bei gleicher Spezifität gewinnt die Regel, die im Stylesheet später erscheint. Das ist das C in CSS – die Kaskade. Sowohl die Importreihenfolge als auch die Reihenfolge der Quellen sind relevant.
Vererbung
Einige CSS-Eigenschaften werden standardmäßig vererbt – untergeordnete Elemente übernehmen den Wert des übergeordneten Elements, ohne dass Sie ihn festlegen müssen. Textbezogene Eigenschaften wie color, font-family und line-height werden vererbt. Box-Model-Eigenschaften wie margin werden nicht vererbt.
body {
font-family: 'Inter', sans-serif; /* all text inherits this */
color: #1a202c; /* all text inherits this */
}Die Selektoren :is() und :where()
Mit :is() und :where() können Sie kompakte Selektoren schreiben, die auf einen beliebigen Eintrag einer Liste passen. Der Unterschied: :is() übernimmt die höchste Spezifität seiner Argumente; :where() hat immer die Spezifität null.
/* Instead of h1 a, h2 a, h3 a: */
:is(h1, h2, h3) a {
color: inherit;
}Der Universalselektor *
Der Universalselektor * wählt jedes Element aus. Er wird häufig in CSS-Resets verwendet: *, *::before, *::after { box-sizing: border-box; } macht das Box-Modell deutlich vorhersehbarer.
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}Standardstile des Browsers
Browser wenden vor Ihrem Stylesheet ihr eigenes Standard-Stylesheet (das User-Agent-Stylesheet) an. CSS-Resets (wie normalize.css) oder CSS-Layer neutralisieren diese Standardwerte, sodass Ihre Formatierung auf einer bekannten Ausgangsbasis beginnt.
Schnelltest
Welcher Selektor hat die höchste Spezifität?
Zusammenfassung: Selektoren und die Kaskade
Wählen Sie Elemente mit Typ-, Klassen-, ID-, Attribut- und Pseudoklassen-Selektoren aus. Die Spezifität löst Konflikte (IDs > Klassen > Typen). Die Kaskade entscheidet bei gleicher Spezifität anhand der Quellreihenfolge. Durch Vererbung werden Textstile automatisch an Nachfahren weitergegeben.
Häufig gestellte Fragen
Ist die Lektion „Selektoren und die Cascade“ kostenlos?
Ja — der vollständige Text von „Selektoren und die Cascade“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Selektoren und die Cascade“?
Wählen Sie Elemente mit Typ-, Klassen-, ID- und Attributselektoren aus. Verstehen Sie Spezifität, Vererbung und die Cascade, um vorherzusagen, welche Stile Vorrang haben. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Selektoren und die Cascade“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Selektoren und die Cascade
- Farben, Typografie und das Box-Modell
- Display: Grundlagen von block, inline, flex und grid
- Positionierung: relative, absolute, fixed, sticky