Das Problem: Beim „stylen“ einer Webseite mittels CSS kann es immer mal wieder vorkommen, dass auf ein Element einer Seite (z.B. ein <h1> Element) mehrere Deklarationen aus verschiedenen Stylesheet zutreffen.

Welche Deklaration gibt nun das Aussehen vor?

Die CSS-Kaskade

Um die oben genannte Problematik zu lösen, gibt es seit CSS 2.1 fest eingeführte Regeln, die festlegen, in welcher Reihenfolge die Deklarationen der verschiedenen Stylesheets gewichtet werden. Beginnen wir mit Ebene 1, der am wenigsten gewichteten Regel.

Ebene 1: Browser-Stylesheets

Jeder Browser definiert selbst gewisse Regeln, wie bestimmte Elemente auszusehen haben. Diese Regeln werden als erstes angewendet, werden aber auch am einfachsten bzw. als erstes überschrieben. Ein Beispiel dafür ist der Standard-Abstand des <body> Elements zum Browserrand. Dieser muss – falls gewünscht – durch den Autor einer Webseite entfernt werden.

Ebene 2: User-Stylesheets

Bei User-Stylesheets handelt es sich um Einstellungen des Benutzers im Browser, die ebenfalls das Erscheinungsbild einer Webseite beeinflussen. Zum Beispiel die Definition einer bestimmten Schriftgröße.

Ebene 3: Autoren-Stylesheets

Dies sind die Stylesheets, die durch den Autoren – also durch den Entwickler – einer Webseite bei der Webseitenerstellung definiert werden.

Alle vom Autor definierten Stylesheets führen bei der Darstellung einer Webseite zu einem Gesamtstylesheet, in dem ebenfalls ein Element an mehreren Stellen, unterschiedliche Deklarationen bekommen kann, die sich überschneiden. Hier gilt: Je näher die Deklaration am Element ist, desto mächtiger ist sie.

Die Reihenfolge (in ihrer Priorität aufsteigend):

  1. externe CSS-Anweisungen
  2. interne CSS-Anweisungen
  3. style-Anweisungen direkt im Tag

Ebene 4: !important

Ist eine CSS-Deklaration mit dem Schlüsselwort „!important“ versehen, wird sie immer den anderen Deklarationen bevorzugt. Sollten zwei Deklarationen mit „!important“ versehen sein und auf ein Element zutreffen, gilt die zuletzt ausgegebene Deklaration.

Gewichtung der Selektoren durch die Spezifität

Bisher haben wir nur zwischen Browser-, Benutzer- und Autoren-Stylesheets unterschieden und haben festgestellt, dass alle CSS-Deklarationen die mit einem „!important“ versehen wurden immer Vorrang haben.

Doch auch unter den Selektoren gibt es bestimmte Prioritäten. Ich bin mir nicht sicher inwiefern die Spezifität für die Zwischenprüfung eine Rolle spielt, trotzdem wollen wir kurz darauf eingehen:

Was sind überhaupt Selektoren?

Definieren wir das Aussehen eines HTML-Elements via CSS, muss dieses zu gestaltende Element auf irgendeine Weise direkt oder indirekt „angesprochen“ werden. Dafür werden sogenannte Selektoren genutzt. Sie können ein Element-Typ generell ansprechen (z.B. eine Headline h1) oder auch spezifisch auf ein Element mit einer festgelegten ID eingehen (z.B. #footer). Auch Kombinationen von Selektoren sind möglich.

Die Selektoren:

Selektor Bezeichnung Bedeutung
* Universalselektor alle Elemente
X Typselektor Element X
X.klasse Klassenselektor Element X mit der Klasse .klasse
X#name ID-Selektor Element X mit der ID name

Pseudoklassen:

Pseudoklassen können Elemente mit bestimmten Zuständen ansprechen.

Zum Beispiel „a:hover“ spricht die Links („a“) an, auf denen sich die Maus gerade befindet (=Mouseover). Oder „p:first-of-type“ spricht den ersten Absatz („p“) innerhalb eines Elementes (z.B. „div“) an.

Die Spezifität

Um die Relevanz bzw. Priorität dieser Selektoren nun herauszufinden, wird ein Wert berechnet, der dessen Durchsetzungsfähigkeit festlegt. Dieser Wer lässt sich anhand eines Zahlenwertes ausdrücken, der mittels Tabelle errechnet wird.

  • Kategorie A erhält den Wert 1, wenn die CSS-Deklarationen direkt im style-Attribut eines HTML-Elements notiert sind.
  • Kategorie B erhält den Wert 1 für ID-Selektoren („X#name“)
  • Kategorie C entspricht der Anzahl der von einem Selektor betroffenen Klassen und Pseudoklassen
  • Kategorie D entspricht der Anzahl der von einem Selektor betroffenen Elemente und Pseudo-Elemente

Beispiele:

Selektor A B C D
a:link 0 0 1 1
.xyz 0 0 1 0
#nav a.xyz 0 1 1 1
li a 0 0 0 2
#nav li a 0 1 0 2

Um die Spezifität nun als Wert vorliegen zu haben, werden die Zahlen der Reihe nach von Kategorie A bis Kategorie D hintereinander Weg geschrieben. Deklarationen mit einem höheren Wert (also einer höheren Spezifität) überschreiben die Deklarationen, mit einer niedrigeren Spezifität.

Im oberen Beispiel beschreiben alle Selektoren das gleiche Element:

Die Deklarationen von „#nav a.xyz“ treffen aufgrund der höheren Spezifität auf das Element zu und werden angewendet.

Sortierung nach Vorkommen

Haben zwei oder mehrere Selektoren die gleiche Spezifität und sprechen das gleiche Element an, so entscheidet die Reihenfolge der Vorkommens. Da Browser den Quelltext einer Seite von oben nach unten auslesen, zählt der zuletzt notierte Selektor.

Habt ihr Ergänzungen oder Verbesserungen? Ab damit in die Kommentare!