CSS Inheritance – Vererbung

Inheritance, die Vererbung von CSS-Stilen, wirkt auf untergeordnete Elemente und sorgt zusammen mit der Kaskade mit minimalem Aufwand für ein konsistentes Erscheinungsbild, damit der Internet-Auftritt nicht aussieht wie eine Fotomontage.

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.

Vererbte Eigenschaften

In CSS gibt es Eigenschaften, die vererbt werden und Eigenschaften, die nicht vererbt werden. font-family und line-height vererben sich von einem übergeordneten Element auf alle darunter liegende Elemente. Das spart jede Menge Schreibarbeit und macht Änderungen einfach.

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 der font-size sieht es allerdings schon anders aus. Der Browser beschert von Haus aus bereits vergrößerte Schrift 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 sie dichte Schichten bilden.

azimuth border-collapse border-spacing caption-side color cursor direction elevation empty-cells font-family font-size font-size-adjust font-stretch font-style font-variant font-weight font letter-spacing line-height list-style-image list-style-position list-style-type list-style orphans pitch-range pitch quotes richness speak-header speak-numeral speak-punctuation speak speech-rate stress text-align text-indent text-transform visibility voice-family volume white-space widows word-spacing

CSS inherit

Einige Elemente sind von der Vererbung ausgeschlossen. So erben z.B. input und textarea keine der Schrift-Eigenschaften und auch color geht nicht auf input und textarea über. Um solch unwillige Elemente mit unter ein Dach zu nehmen, gibt es das Schlüsselwort inherit.

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

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 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; }
INHERITANCE