CSS Inheritance – Vererbung

Vererbte Eigenschaften

In CSS gibt es Eigenschaften, die vererbt werden, und Eigenschaften, die nicht vererbt werden. Das bekannteste und meistgenutzte Erbe ist font-family: Gibt man dem body- oder html-Element eine Schrift mit, dann erben (mit wenigen Ausnahmen) alle Elemente diese Schrift.

body { 
   font-family: Arial;
   line-height: 1.5;
}

/** Überflüssig **/
h1, h2 {
	font-family: Arial;
}

/** Überflüssig **/
p {
    font-family: Arial;
    line-height: 1.5;
}

Vererbt werden Eigenschaften wie font-family und color, bei font-size sieht es allerdings schon anders aus. Der Browser beschert von Haus aus bereits vergrößerte Schriften für Elemente wie h1.

background-color – die Hintergrundfarbe – wird nicht vererbt. Sie scheint sozusagen nur durch die transparenten Kindelemente durch. Auf einige wenige Elemente, die schon im reinen HTML besondere Eigenschaften für die Darstellung haben (z.B. das pre-Element), wirken die vererbbaren Eigenschaften nicht.

Vererbte Eigenschaften

Vererbung ist zwar intuitiv, aber man braucht ein gutes Gedächtnis, um sich zu merken, wo Inherit gilt und wo nicht. Auch ein kurzer Logikcheck hilft: Wenn border erblich wäre, hätten alle Elemente unterhalb eines Elements mit border ebenfalls einen Rahmen. Wenn background-image erblich wäre, würden Hintergrundbilder dichte Schichten bilden.

Elemente ohne Vererbung

Einige Elemente sind von der Vererbung ausgeschlossen. So erben z.B. input und textarea weder Eigenschaften die Schrift noch CSS color. Um unwillige Elemente mit unter das Dach zu bringen, gibt es das Schlüsselwort inherit.

input, 
textarea, 
button { 
    font-family: inherit; 
    line-height: inherit;
    font-size: inherit;
}

Ohne font-family:inherit würden Eingabefelder nicht in der Schrift der Seite, sondern in einer Serifenschrift gerendert. inherit wird in der Praxis selten gebraucht. Die CSS-Kaskade schüttet die nützlichen Erbschaften wie Schrift und Farbe schon automatisch nach unten aus.

Vererbung nutzen

Um die Hebelwirkung der Vererbung und der CSS-Kaskade auszuschöpfen, beginnt das CSS mit den Element-Selektoren. Element-Selektoren haben eine geringe Spezifität (Gewicht oder specificity) und überschreiben keine CSS-Klassen, die später zum CSS hingefügt werden.

a { … }
p { … }
h1, h2, h3 { … }
input, textarea { … }

CSS IMPORTANT

Damit sich eine Eigenschaft entgegen allen vorangegangenen Regeln durchsetzt, wird sie als !important notiert.

aside li a { color: green !important; }

!important ist ein Vorschlaghammer und bleibt am besten Tests in den Entwickler-Tools der Konsole der Browser vorbehalten.