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.
Ü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.
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.
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.
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.
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.
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
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.
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.
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.
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.
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;
}
Hinterlasse mir gerne einen Kommentar zum Artikel und wie er dir weitergeholfen hat beziehungsweise, was dir helfen würde das Thema besser zu verstehen. Oder hast du einen Fehler entdeckt, den ich korrigieren sollte? Schreibe mir auch dazu gerne ein Feedback!
Es sind noch keine Kommentare vorhanden? Sei der/die Erste und verfasse einen Kommentar zum Artikel "CSS Spezifität - Gewichtung von CSS Selektoren erkennen"!