Kaskade & Spezifität

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.

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.

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.

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.

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

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.