Lerne Coding
CSS Spezifität - Gewichtung von CSS Selektoren erkennen
09.07.2022

CSS Spezifität - die Gewichtung

Inhaltsverzeichnis
[[TABLE OF CONTENTS]]
access_timeGeschätzte Lesezeit ca. Minuten

Die CSS-Spezifität hilft dabei, die Gewichtung von CSS Selektoren zu verstehen und zu bestimmen. So könnt ihr einfacher Ursachen erkennen, warum ein Style, den ihr grade vermeintlich auf ein Element angewendet habt, nicht zum Tragen kommt.

Was versteht man unter CSS-Spezifität?

Über die CSS-Spezifität wird festgelegt, welcher Selektor den Vorrang hat. Wenn mehrere Selektoren dasselbe Element im HTML Dom ansprechen. Grundsätzlich wird der CSS-Spezifität Wert eines Selektors in 4 Gruppen von A, B, C, D aufgeteilt. Wobei ein Selektor der Gruppe A eine höhere Gewichtung als ein Selektor der Gruppe D hat.

Berechnung der CSS-Spezifität

Wie oben schon beschrieben, gibt es 4 Gruppen von Elementen, die zur Wertung der Selektoren herangezogen werden. Diese Gruppe besteht aus Inline Style Attributen, IDs, (Klasse, Pseudoklasse, Attribute Selektor) und Element/Pseudoelementen. Der nachfolgenden Tabelle kann die Wertung entnommen werden, anhand dessen können wir ein paar Beispiele zeigen.

Thema der Tabelle "CSS-Spezifität (Überblick)"
Selektor A B C D Spezifität
inline Style Attribute 1 0 0 0 1 - 0 - 0 - 0
ID 0 1 0 0 0 - 1 - 0 - 0
Klasse | Pseudoklasse | Attribute Selektor 0 0 1 0 0 - 0 - 1 - 0
Elemente | Pseudoelemente 0 0 0 1 0 - 0 - 0 - 1
* (Universal Selektor) 0 0 0 0 0 - 0 - 0 - 0

Wichtig ist das es sich bei den Werten nicht um Punkte handelt also 1000, 100, 10, 1, sondern um Werte in einer Matrix, dazu unten ein ausführlicherer Abschnitt, solang du unter einem Wert von 10 bleibst kannst du es erst einmal wie ein Punktesystem betrachten der Einfachheit halber.

Beispiele für die Berechnung der Spezifität

Nun in der nachfolgenden Tabelle haben wir 3 unterschiedliche Selektoren für einen Link im Main Bereich der Webseite. Alle 3 können dasselbe Element ansprechen, der Unterschied liegt in der Spezifität.

Thema der Tabelle "CSS-Spezifität (Beispiel)"
Selektor A B C D Spezifität
body main#main a 0 1 0 3 0 - 1 - 0 - 3
body main.main a 0 0 1 3 0 - 0 - 1 - 3
main[id=”main”] a 0 0 1 2 0 - 0 - 1 - 2
a.link 0 0 1 1 0 - 0 - 1 - 1

Da das Element body main#main a durch die Verwendung einer ID, die nicht mittels Attribute Selektor ausgewählt wurde, sondern eines regulären ID Selektors hat diese eine Spezifität in Gruppe B. Dadurch ist die Priorität am Höchsten. So kann zum Beispiel eine ID mittels Attribute Selektors ausgewählt werden, um die Spezifität nicht unnötig zu erhöhen und das Überschreiben zu erschweren.

Falls du dir mit der Berechnung der Spezifität noch nicht so sicher bist, kannst du dir einmal das Tool von PolyPane anschauen, diese kann dir die Spezifität auch berechnen. Wobei hier die Gruppe A nicht angegeben wird, da diese nur bei Inline Styles greift. Der Einfachheit halber habe ich diese Gruppe in der Erklärung mit aufgeführt.

Ansicht der Webseite und des Tools, es wird die Spezifität für body#main main.main[id="main"] a.link von 1,3,3 angezeigt.
Ansicht der Webseite und des Tools, es wird die Spezifität für body#main main.main[id="main"] a.link von 1,3,3 angezeigt.

Nach "Selectors Level 4" wird auch die Gruppe A (Inline Styles) nicht mehr in der Dokumentation aufgeführt. Sondern dort wird die ID zur Gruppe A. Mehr dazu hier: https://www.w3.org/TR/selectors-4/#specificity-rules

Was passiert bei gleichem Wert der Spezifität?

Natürlich kann es einmal vorkommen, dass du die gleiche Spezifität erreicht, mit unterschiedlichen Selektoren. Zum Beispiel in dem nachfolgenden Beispiel haben beide Selektoren eine Spezifität von “0-0-0-2”, weil es jeweils 2 Elemente sind.

body div{
  color: blue;
}

html div{
   color: red;
}

Welcher der beiden Styles bevorzugt wird, hängt nun vom "C" in CSS ab. Cascading bestimmt jetzt letztendlich welcher Style verwendet wird anhand seiner Position in der CSS Datei. Falls mehrere CSS Dateien im Browser geladen werden, hat die letzte höchste Priorität. Also in unserem Code Beispiel von oben wird der Text im Div die Farbe Rot erhalten, weil es als Letztes vom Browser gelesen wird. Da CSS von Oben nach Unten gelesen wird.

Wie das !important bei der CSS-Spezifität funktioniert?

Zusätzlich gibt es bei der Spezifität noch einen Sonderfall, und zwar das !important Statement, das einzelnen CSS-Eigenschaften hinzugefügt werden kann. Dieses Statement erhöht die Priorität so, dass diese nur von einem anderen !important Statement überschrieben werden kann. Dort greifen wieder die CSS-Kaskadierungseigenschaften und die CSS-Spezifität.

Grundsätzlich ist zu empfehlen auf die Verwendung von !important komplett zu verzichten und immer versuchen, die CSS-Spezifität „künstlich“ zu erhöhen.

Tipp zur Steigerung der CSS-Spezifität

Um die CSS-Spezifität zu erhöhen gibt es unterschiedliche Vorgehensweisen. Für eine Leichte Erhöhung kann es je nach Situation schon helfe im Selektor das body und/oder html Element zu verwenden. Wenn du eine höhere Spezifität brauchst als eine Erhöung um “0 - 0 - 0 - 2” dann kann man zum Beispiel einem höheren Element noch eine ID geben und so die CSS-Spezifität erhöhen.

Häufig arbeiten externe Widgets die in die eigene Webseite eingebunden werden sollen mit sehr langen Selektoren (also auch mit einer hohen CSS-Spezifität) auch diese kann theoretisch immer Überschrieben werden. Allerdings ist das zum Beispiel ein Fall wo ein !important die Richtige Wahl sein kann, um sein CSS nicht zu Verkomplizieren.

Die CSS-Spezifität ist ein Matrixsystem und kein Punktesystem

Wichtig ist, wenn du mit extrem großen Selektoren arbeitest, mit mehr als 10 Klassen, Elementen oder IDs, dass du nicht aus unterschiedlichen Gruppen zusammenfügen darfst. Bei kleineren Werten als 10 mag das noch funktionieren, aber danach nicht mehr. Den die CSS-Spezifität ist kein Punktesystem, sondern ein Matrixsystem. Bedeutet eine Spezifität von “0 - 1 - 0 - 0” bekommst du mit einer Spezifität von “0 - 0 - 16 - 0” nicht überschrieben, obwohl bei einer Darstellung als Zahl du einen Wert von 160 gegenüber einem Wert von 100 erhalten würdest.

In der Tabelle siehst du noch einmal 2 Beispiel passende zur Spezifität die ich grade Beschreibe.

Thema der Tabelle "CSS-Spezifität (Matrix)"
Selektor A B C D Spezifität
.a.b.c.d.e.f.g.h.i.j.k.l.m.n.o.p 0 0 16 0 0 - 0 - 16 - 0
#higher 0 1 0 0 0 - 1 - 0 - 0

Betrachten wir nun das folgende Beispiel, würden beide Selektoren auf ein Element zutreffen wäre die Farbe Blau den die Spezifität in Gruppe B ist höher. Heißt die ID #higher wird man nur mit einer ID, einem Inline Style beim Element selbst oder einem !important überschrieben bekommen.

#higher{
  background: blue;
}

.a.b.c.d.e.f.g.h.i.j.k.l.m.n.o.p{
  height: 200px;
  width: 200px;
  background: red;
}
Bildquellen - Vielen Dank an alle Ersteller:innen für die Bilder
Kommentare zum Artikel

Es sind noch keine Kommentare vorhanden? Sei der/die Erste und verfasse einen Kommentar zum Artikel "CSS Spezifität - Gewichtung von CSS Selektoren erkennen"!

Kommentar schreiben

Vom Autor Empfohlen
close