Kaskade & Spezifität

Zuletzt aktualisiert am 3. Juli 2026

Du hast bereits viele Selektoren kennengelernt. In echten Projekten treffen oft mehrere CSS-Regeln auf dasselbe Element, und diese Regeln können sich widersprechen. Welche Farbe gewinnt, wenn ein Absatz gleichzeitig von einem Element-Selektor, einer Klasse und einer ID gestylt wird? Die Antwort liefert die Kaskade: Ein festes Regelwerk, das der Browser bei jedem einzelnen Element durchgeht.

Die Kaskade

Das “C” in CSS steht für “Cascading”. Die Kaskade ist der Algorithmus, mit dem der Browser entscheidet, welche CSS-Deklaration gewinnt. Drei Faktoren spielen dabei eine Rolle, und der Browser prüft sie in dieser Reihenfolge:

1. Herkunft und Wichtigkeit: Woher kommt die Regel? (Browser-Defaults, dein Stylesheet, !important)
2. Spezifität: Wie genau ist der Selektor?
3. Reihenfolge im Code: Bei gleicher Spezifität gewinnt die letzte Regel.

Reihenfolge im Code

Der einfachste Fall: Zwei Regeln mit der gleichen Spezifität, die auf dasselbe Element zielen. Die letzte Regel gewinnt.

p {
  color: #1a56db;
}

p {
  color: #dc2626;
}

<p>Welche Farbe hat dieser Text?</p>

Der Text ist rot, weil die zweite Regel weiter unten im Code steht. Bei identischen Selektoren entscheidet die Reihenfolge. Das gilt auch, wenn die Regeln in verschiedenen Stylesheets stehen: Das zuletzt eingebundene Stylesheet gewinnt.

Spezifität berechnen

Wenn zwei Regeln unterschiedliche Selektoren verwenden, entscheidet die Spezifität. Je spezifischer ein Selektor, desto höher seine Priorität. Die Spezifität lässt sich als Punktesystem verstehen.

Das Punkte-System

Jeder Selektor bekommt einen Wert in drei Kategorien. Denk an drei Spalten:

Der Universal-Selektor (*), Kombinatoren (>, +, ~) und die Negation (:not()) zählen nicht zur Spezifität. Bei :not() zählt allerdings der Selektor innerhalb der Klammern.

Beispiel-Berechnungen

Wichtig: Die Spalten werden nicht addiert, sondern von links nach rechts verglichen. Ein einziger ID-Selektor (1-0-0) schlägt hundert Klassen-Selektoren (0-100-0). Die Kategorien “überlaufen” nicht.

Spezifität in Aktion

p {
  color: #1a56db;       /* Spezifität: 0-0-1 */
}

.highlight {
  color: #dc2626;       /* Spezifität: 0-1-0 */
}

#special {
  color: #059669;       /* Spezifität: 1-0-0 */
}

<p id="special" class="highlight">Welche Farbe gewinnt?</p>

Der Text ist grün. Obwohl p und .highlight ebenfalls eine Farbe definieren, gewinnt #special, weil die ID-Spezifität (1-0-0) höher ist als Klasse (0-1-0) und Element (0-0-1). Die Reihenfolge im Code spielt hier keine Rolle.

Vererbung

Manche CSS-Eigenschaften werden automatisch von Eltern-Elementen an ihre Kinder weitergegeben. Das nennt man Vererbung.

div {
  color: #7c3aed;
  font-size: 18px;
  border: 2px solid #7c3aed;
  padding: 16px;
}

<div>
<p>Dieser Absatz erbt Farbe und Schriftgröße.</p>
<p>Aber nicht den Border und nicht das Padding.</p>
</div>

Die <p>-Elemente bekommen color und font-size automatisch vom <div>, obwohl für p keine Regel definiert wurde. Aber border und padding werden nicht vererbt, weil das in den meisten Fällen nicht sinnvoll wäre.

Werden vererbt (Auswahl): color, font-family, font-size, font-weight, line-height, text-align, visibility, cursor, list-style

Werden nicht vererbt (Auswahl): margin, padding, border, background, width, height, display, position

Faustregel: Text-bezogene Eigenschaften werden vererbt. Box-bezogene Eigenschaften (Abstände, Rahmen, Größen) nicht.

Vererbung steuern

Mit drei Schlüsselwörtern kannst du die Vererbung manuell kontrollieren:

.parent {
  color: #dc2626;
  border: 2px solid #dc2626;
  padding: 12px;
}

.child-inherit {
  border: inherit;
  padding: 8px;
}

.child-initial {
  color: initial;
}

<div class="parent">
<p>Normales Kind: Erbt die rote Farbe.</p>
<p class="child-inherit">inherit: Erbt auch den Border.</p>
<p class="child-initial">initial: Setzt Farbe auf den Anfangswert zurück.</p>
</div>

• inherit: Erzwingt Vererbung, auch bei Eigenschaften, die normalerweise nicht vererbt werden
• initial: Setzt die Eigenschaft auf den CSS-Standardwert zurück (nicht den Browser-Default, sondern den Wert aus der CSS-Spezifikation)
• unset: Kombiniert beides. Bei Eigenschaften, die normalerweise vererbt werden, wirkt es wie inherit. Bei allen anderen wie initial.

!important

Mit !important hinter einem Wert überschreibst du alle normalen Spezifitäts-Regeln:

#title {
  color: #1a56db;       /* Spezifität: 1-0-0 */
}

.warning {
  color: #dc2626 !important;  /* Gewinnt trotz niedrigerer Spezifität */
}

<h2 id="title" class="warning">Welche Farbe gewinnt?</h2>

Der Text ist rot. Obwohl #title eine höhere Spezifität hat, gewinnt .warning wegen !important. Das !important-Flag hebt die Deklaration aus dem normalen Kaskade-Fluss heraus.

Warum !important problematisch ist

!important löst kurzfristig ein Problem, schafft aber langfristig neue:

• Es lässt sich nur durch ein anderes !important mit gleicher oder höherer Spezifität überschreiben
• Das führt zu einer Eskalation: Immer mehr !important-Regeln im Code
• Die Kaskade wird unberechenbar und schwer zu debuggen

Wann !important akzeptabel ist

• Utility-Klassen, die immer gelten sollen (z.B. .hidden { display: none !important; })
• Overrides von Third-Party-CSS, das du nicht direkt ändern kannst
• Barrierefreiheit, z.B. für Hochkontrast-Styles

In eigenem Code sollte !important die absolute Ausnahme sein. Wenn du es brauchst, ist das meistens ein Zeichen, dass deine Selektoren zu spezifisch sind.

Die Kaskade im Überblick

Wenn der Browser entscheidet, welche Deklaration für eine Eigenschaft gilt, geht er diese Schritte durch:

Häufige Fehler

• Spezifitäts-Kriege statt Refactoring: Wenn du einen Style nicht überschreiben kannst, erhöhe nicht einfach die Spezifität oder setze !important. Prüfe stattdessen, ob die bestehende Regel zu spezifisch ist, und vereinfache sie.
• IDs für Styling verwenden: IDs haben eine so hohe Spezifität, dass sie schwer zu überschreiben sind. Nutze Klassen für CSS, IDs für JavaScript und Anker-Links.
• Annehmen, dass alle Eigenschaften vererbt werden: border: inherit funktioniert, aber nur weil du es explizit setzt. Ohne inherit bekommt ein Kind-Element keinen Border vom Eltern-Element.
• initial mit “kein Style” verwechseln: initial setzt auf den CSS-Spezifikations-Wert zurück, nicht auf den Browser-Default. color: initial ergibt zum Beispiel schwarz (der CSS-Initialwert), nicht die Farbe, die der Browser normalerweise anzeigt.
• Zu viele Selektoren verketten: body main .content article p.intro hat eine hohe Spezifität und ist schwer zu überschreiben. .intro reicht meistens.

Zusammenfassung

Du verstehst jetzt, warum manchmal ein Style nicht greift und wie der Browser entscheidet. Im nächsten Artikel geht es um CSS Nesting: Wie du Regeln direkt ineinander verschachtelst und Selektor-Wiederholungen vermeidest.