Workshop CSS: Teil 6 - Kaskaden

Wenn mehrere Stylesheet-Anweisungen aufeinander treffen

Was passiert eigentlich, wenn mehrere Stylesheet-Anweisungen aufeinander treffen? Die meisten Browser haben eine Standard-Stylesheet-Datei, die die Grundeinstellungen zum Anzeigen einer Webseite enthält und eine Stylesheet-Datei, in der die Anwender-Einstellungen gespeichert sind. Zzgl. der Stylesheets der Webseite, die der Autor festlegt, treffen vier oder mehr Stylesheet-Dateien aufeinander. Da in allen Dateien Eigenschaften für gleiche Elemente, wie z.B. Absätze, Überschriften, Hyperlinks, usw. angegeben sind, stellt sich die Frage, welche Angaben sich durchsetzen. Für diesen Fall gibt es die kaskadierten Regeln nach denen die spezifischste (genaueste, detaillierteste) Angabe gewinnt. Was das bedeutet, soll das nächste Beispiel erklären.

nach oben

Die spezifischste Angabe setzt sich durch

Ein XHTML-Dokument mit folgender Struktur:

<p>Ein Absatz mit <p>
<span>nun in einem <span>Tag
<span class="em">und jetzt sogar mit class-Selektor
<span id="id">gefolgt von einem ID-Selektor</span></span></span></p>

dazu die folgenden Stylesheets:

span{ color: blue; }
p{ color: black; }
p span { color: green; }
span.em { color: yellow; }
#id { color: red; }

Die korrekte Darstellung der Schriftfarben sollte so aussehen:

Ein Absatz mit <p> nun in einem <span>Tag und jetzt sogar mit class-Selektor gefolgt von einem ID-Selektor

Die erste Zeile legt für <span>-Tags die Schriftfarbe Blau fest, die zweite Zeile für <p>-Tags die Schwarz. Die dritte Zeile verwendet einen verschachtelten Selektor, um für <span>-Tags, die innerhalb von Absätzen mit <p>-Tags vorkommen, die Schriftfarbe Grün festzulegen. Diese Angabe ist spezifischer (genauer) als die erste Zeile, da sie <span>-Tags, die in <p>-Tags vorkommen, formatiert, anstatt "nur" <span>-Tags allgemein, wie in der ersten Zeile. Deshalb erscheint die zweite Zeile in Grün. Eine Kaskaden-Regel besagt: »Je mehr Elementnamen aufgeführt werden, desto spezifischer die Angabe.« In der vierten Zeile wird mit dem class-Selektor em, der in diesem Beispiel nur für <span>-Tags gültig ist (span.em {..} ist gültig für <span class="em">), eine gelbe Schriftfarbe festgelegt. class-Selektoren sind mit attributabhängige Selektor gleichzusetzen, da sie Elemente mit dem Attribut class formatieren. Und zwei weitere Regel besagen: »Je mehr Attribute aufgeführt werden, desto spezifischer die Angabe.« und »Attribute sind spezifischer als Elementnamen«. Folglich ist span.em spezifischer als p span. Die höchste Spezifikation besitzen die ID-Selektoren. Dementsprechend wird der letzte Abschnitt in dem Beispiel in Rot dargestellt.

nach oben

Berechnung der Spezifität

Die Spezifität kannst du leicht berechnen indem du eine Tabelle wie die Folgende verwendest.

Zähle die Anzahl der ID-Attribute in dem Selektor und trage sie in die Spalte b ein.
Zähle die Anzahl der anderen Attribute und der Pseudoklassen in dem Selektor und trage sie in die Spalte c ein.
Zähle die Anzahl der Elementnamen und der Pseudoelemente in dem Selektor und trage sie in die Spalte d ein.
Das style-Attribut hat die höchste Spezifität und erhält immer den Wert 1 in Spalte a

Daraus ergibt dich eine Zahl nach dem Schema:

a = 1000er-Stelle
b = 100er-Stelle
c = 10er-Stelle
d = 1er-Stelle

Selektor	a	b	c	d	Spezifität
`*`	0	0	0	0	0000
`p`	0	0	0	1	0001
`p:first-child`	0	0	0	2	0002
`div p`	0	0	0	2	0002
`div p+span`	0	0	0	3	0003
`h1 + *[kap=index]`	0	0	1	1	0011
`div p span.red`	0	0	1	3	0013
`#name`	0	1	0	0	0100
`style=""`	1	0	0	0	1000

Sehen wir uns die Zeile mit dem verschachteltetn Selektor div p span.red an. Der passende XHTML-Code würde so aussehen:

<div>
<p>
Franz jagt im komplett <span class="red">verwahrlosten</span>
Taxi quer durch Bayern
</p>
</div>

Ein <p>-Tag in einem <div>-Container, das ein <span>-Tag mit dem class-Attribut enthält.
In der Zeile stehen drei Elementnamen (<div>, <p>, <span>), die in die Spalte d eingetragen werden, und ein Attribut (span.red steht für span [class=red], ein Tag mit dem Attribut class, das den Wert red enthält). Also wird ein gefundenes Attribut in die Spalte c eingetragen. Zusammengerechnet ergibt das 13.

Ein einfaches .red ist nur ein Attribut ohne Elementnamen, wird in die Spalte c eingetragen und ergibt 10. Somit hat div p span.red eine höhere Spezifität als .red. Das leuchtet auch ein, oder? Ein <p>-Tag in einem <div>-Container, das ein <span>-Tag mit dem class-Attribut enthält, ist nun mal genauer als ein einfaches class-Attribut mit dem Wert red.

nach oben

Die Letzte wird der Erste sein

Was soll aber geschehen, wenn zwei gleichwertige Angaben aufeinander treffen? Schaue dir folgendes Beispiel an:

span{ color: blue; background-color:white;}
span{ color: red; }

So etwas in eine CSS-Datei zuschreiben ist sicherlich nicht sinnvoll. Aber es ist durchaus möglich, dass gleichwertige Angaben wie diese in unterschiedlichen Dateien stehen oder die Erste in einer externen Datei und die Zweite lokal im head-Bereich der Datei. In so einem Fall überschreibt die zuletzt Aufgeführte die Vorangegangenen. In diesem Beispiel bleibt die Hintergrundfarbe Weiß, aber der Wert für die Schriftfarbe wird in der zweiten Zeile durch Rot überschrieben.
Ein Beispiel: Du hast für eine Website eine Stylesheet-Datei erstellt, die u.a. folgende Anweisungen enthält:

body {
 font-family: Verdana, Arial, sans-serif;
 font-size:70%;
}
h1 {
font-size:1.3em;
color:blue;
}
div {
 border :1px solid green;
}

Auf einer Seite soll nun die Farbe der Überschrift <h1> Rot sein und alle <div>-Container einen blauen Rahmen haben. Dann könntest du folgendes machen:

<link href="main.css" rel="stylesheet" type="text/css" />
<style type="text/css">
 div {border:1px solid blue;}
</style>
...
<h1 style="color:red;">Überschrift</h1>
...

Zuerst fügst du die externe Stylesheet-Datei main.css ein. Dann legst du für das <div>-Element einen blauen Rahmen fest. Der in main.css festgelegte grüne Rahmen wird hier überschrieben und ist für das gesamte Dokument gültig. Zu guter letzt fügst du in dem <h1>-Tag das style-Attribut ein. Dieses ändert die Schriftfarbe für die Überschrift an dieser Stelle in Rot.

nach oben

Die !important-Regel

Stell dir eine Website mit einer allgemeinen Stylesheet-Datei vor, die alle Grundformatierungen enthält. Weiterer Stylesheet-Dateien enthalten spezielle Formatierungen für einzelne Seiten. Nach den kaskadierenden Regeln könnten vorhandene Stylesheets überschrieben werden und das allgemeine Design dieser Website verändern.
Dies kannst du aber verhindern. Als Beispiel sehe dir das folgende Dokument an:

<link href="main.css" rel="stylesheet" type="text/css" />
<link href="site.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
 h1 { color:green; }
-->
</style>

.
<h1>Überschrift</h1>
<h1 style="color:yellow;">Überschrift</h1>

...

Der Inhalt von main.css

body {
 font-family: Verdana, Arial, sans-serif;
 font-size:70%;
}
h1 {
font-size:1.3em !important;
color:blue !important;
background-color:#efefef !important;
}

Der Inhalt von site.css

h1 {
font-size:1.8em;
color:red;
background-color:#fff;
}

Dieses Beispiel zeigt ein XHTML-Dokument mit zwei Stylesheet-Dateien. Die Erste legt für Überschriften eine Schriftgröße von 1.3em, eine blaue Schriftfarbe und einen grauen Hintergrund fest. Die Zweite sollte die Werte ebenso überschreiben wie die lokal im <head>-Bereich oder mit dem <style> notierten Angaben. In dem Beispiel erscheint die Überschrift jedoch, wie in der main.css festgelegt. Der Grund dafür ist das Schlüsselwort !important, das die Priorität einer Angabe erhöht, sodass sie nicht von Nachfolgenden überschrieben wird.

Anmerkung: Der IE bis einschliesslich Version 6 interpretiert die !important-regel nur, wenn die Eigenschaften der Selektoren wie im Beispiel mehrfach deklariert werden. Mehrere Angaben innerhalb eines Selektors wie:

h1 {
color:blue !important;
color:red;
}

werden falsch interpretiert.

nach oben

Kaskadenreihenfolge

Zum Abschluß nochmals die komplette Kaskadenreihenfolge, wie sie der Browser bearbeitet:

Der Browser sucht nach gleichen Stylesheet-Angaben.
Gleichwertige Angaben werden zunächst nach ihrer Herkunft sortiert.
1. Benutzer-Stylesheets mit !important haben Vorrang vor Autoren-Stylesheets mit !important
2. Autoren-Stylesheets mit !important haben Vorrang vor Autoren-Stylesheets ohne !important
3. Autoren-Stylesheets ohne !important haben Vorrang vor Benutzer-Stylesheets ohne !important
4. Benutzer-Stylesheets ohne !important haben Vorrang vor Browser-Stylesheets
Für gleichwertige Angaben innerhalb eines Stylesheets (Benutzer, Autor oder Browser) wird die Spezifität berechnet und entsprechend sortiert.
Bei Angaben innnerhalb eines Stylesheets mit gleicher Spezifität wird die zuletzt auftretende verwendet.