CSS Vererbung

CSS-Vererbung bedeutet, dass bestimmte CSS-Eigenschaften, die an ein Elternelement (Parent) vergeben wurden, automatisch auf seine Kindelemente (Children) übertragen werden. Das erleichtert das Styling, weil du nicht jede Eigenschaft für jedes einzelne Element neu definieren musst.

Cascading in CSS

Cascading ist das Herzstück von CSS. Es beschreibt, wie der Browser entscheidet, welche CSS-Regel bei Konflikten gilt, wenn mehrere Regeln auf dasselbe Element und dieselbe Eigenschaft angewendet werden.

Die Reihenfolge der Styles

Vererbung von Aussen nach Innen

CSS-Kaskade

Welche Regel gilt

Es gibt 4 wichtige Faktoren, die bestimmen, welche CSS-Regel gewinnt:

User-Agent-Stylesheet: Die vom Browser vorgegebenen Standardwerte.
User-Stylesheet: Vom Benutzer definierte Regeln (z.B. in Browser-Einstellungen).
Author-Stylesheet: Das ist dein CSS (Externe Dateien, interne Styles, Inline-Stile).
Inline-Stile: Direkt im HTML-Element gesetzte Stile (style="...").

Vererbbare Eigenschaften

CSS-Definitionen werden innerhalb der Dokumentenstruktur weitergegeben. Kindelemente übernehmen bestimmte Eigenschaften ihres Elternelements automatisch. Elemente können Werte von ihrem übergeordneten Element erben.

html {font-size: 100%;}

body {color:indigo; font-size: 1rem; margin:20px;}

h1 {color:indigo;}

p {color:indigo; font-size: 1rem;}

body { color: indigo;}
p { /* Der Text in <p> wird indigo, color wird vererbt  */ }

Typische vererbbare Eigenschaften:
Viele Eigenschaften, die mit Text und Schriftgestaltung zu tun haben, sind standardmässig vererbbar.

color
font-family, font-size, font-style, font-weight
letter-spacing
line-height
text-align
visibility
cursor
list-style
quotes

Nicht vererbbare Eigenschaften
Andere Eigenschaften, besonders solche, die das Box-Modell, Layout oder Farben des Hintergrunds und der Rahmen betreffen, werden nicht vererbt.

margin, padding
border
background
width, height
display
position
top, left, right, bottom

Steuerung der Vererbung

inherit

Mit dem Schlüsselwort inherit kannst du explizit definieren, dass eine Eigenschaft vom Elternelement übernommen werden soll, auch wenn sie normalerweise nicht vererbt wird.

div { border: 1px solid black; }
span { border: inherit; /* übernimmt den border vom Elternelement */}

initial

Setzt eine Eigenschaft auf ihren ursprünglichen, vom Browser definierten Standardwert zurück.

p { color: initial; /* setzt die Farbe auf Standard zurück */ }

unset

unset ist eine Kombination aus inherit und initial. Für vererbbare Eigenschaften verhält es sich wie inherit, für nicht vererbbare wie initial.

p {
  color: unset;
  margin: unset;
}

Vererbte Werte überschreiben

Eine spezifischere Regel überschreibt eine vererbte Eigenschaft. Vererbung wirkt nur, solange am Kindelement keine andere Regel mit höherer Spezifität greift.

body { color: blue;}
p {color: red; /* Überschreibt die Vererbung von body */}

Spezifität (Specificity)

Wenn mehrere Regeln von gleicher Herkunft auf dasselbe Element zielen, entscheidet die Spezifität, welche Regel gilt. Haben zwei Regeln die gleiche Spezifität, gewinnt die später definierte Regel im Stylesheet.

Inline-Stile haben die höchste Spezifität.
IDs sind spezifischer als Klassen.
Klassen sind spezifischer als Elemente.

/* Geringe Spezifität */
p { color: blue; }

/* Höhere Spezifität */
.classname { color: red; }

/* Noch höhere Spezifität */
#idname { color: green; }

/* Inline-Stil */ 
<p style="color: orange;">Text</p>

Im Beispiel gewinnt der Inline-Stil, dann die ID, dann die Klasse, dann der Element-Selektor.
Man sollte Inline-Styles vermeiden, weil sie die Wartbarkeit erschweren, Code unleserlich machen, Wiederverwendung verhindern und die Performance beeinträchtigen, indem sie Caching-Vorteile zunichtemachen, sowie die Trennung von Struktur (HTML) und Design (CSS) aufheben.

Die !important-Regel

!important ist ein spezielles CSS-Schlüsselwort, das einer Regel höchste Priorität gibt, selbst über Inline-Stile und Spezifität hinweg. Wird es auf eine Eigenschaft angewendet, wird diese Regel bevorzugt, egal wie spezifisch andere Regeln sind.

p { color: blue !important; }
p { color: red; }
/* Ergebnis: Der Text wird blau, weil !important die rote Regel übersticht */

Wichtig:
Wenn zwei konkurrierende Regeln beide !important haben, entscheidet wieder die Spezifität und Reihenfolge. Inline-Stile ohne !important können von !important aus Stylesheets überschrieben werden.

Beispiel

<!DOCTYPE html>
<html lang="de">
<head>
<style>
  p { color: blue; }            /* Geringe Spezifität */
  .important { color: red !important; } /* !important */
  #special { color: green; }    /* Höhere Spezifität */
</style>
</head>
<body>

<p id="special" class="important" style="color: orange;">Testtext</p>

</body>
</html>

Ergebnis:

.important { color: red !important; } hat .important und gewinnt trotz niedrigster Spezifität.
Inline-Stil (orange) wird ignoriert, weil .important aus Stylesheet höher zählt.
ID-Stil (green) wird ignoriert, weil ohne .important.

Der Text wird rot.