It’s #FrontendFriday – CSS-Spezifität
In der Frontend-Entwicklung werden häufig mehrere Style-Sheets aus verschiedenen Quellen verwendet, um HTML-Dokumente zu formatieren und zu gestalten. Dies kann zu Konflikten führen und der Browser muss mithilfe der CSS-Spezifität ermitteln, welcher Style verwendet werden soll.
Die Ermittlung der CSS-Spezifität
Jede ID, jede Klasse und jedes HTML-Element hat ein vorab festgelegtes Gewicht, das nicht verändert werden kann. Die Bewertung erfolgt nach einem einfachen Punktesystem.
| Selektor-Typ | Beispiel | Bewertung |
| HTML-Element | div, a, p, li,… | 1 |
| CSS-Klasse | .test-class | 10 |
| Pseudoklasse | :active, :first-child,… | 10 |
| ID | #header | 100 |
| Attribute-Style | style=“background: red;“ | 1000 |
Die Spezifität kann mit Hilfe von kommaseparierten Werten dargestellt werden. Dabei befindet sich das Element mit der höchsten Priorität (Attribute-Style) an erster Stelle. Daraufhin folgt die ID, dann die CSS-Klassen mit den Pseudoklassen und zuletzt das HTML-Element.
Attribute-Style, ID, Pseudoklasse oder CSS-Klasse, HTML-Element –> 0,0,0,0
Beispiel:
Der CSS-Selektor setzt sich aus einem HTML-Element a und einer Klasse .mat-icon zusammen und kann somit mit 0,0,1,1 bewertet werden.
Wichtig ist, dass die einzelnen Elemente nicht einfach aufaddiert werden dürfen. So ist beispielsweise ein CSS-Selektor mit einer einzigen Klasse (0,0,1,0), noch immer wichtiger als ein CSS-Selektor mit 11 HTML-Elementen (0,0,0,11). Der Browser vergleicht die einzelnen Werte von links nach rechts.
Ausnahmen und Sonderfälle
Natürlich gibt es Ausnahmen und Sonderfälle wie bei gleicher Gewichtung, *-Selektoren oder durch !important.
Was geschieht bei gleicher Gewichtung?
Haben beide Selektoren dieselbe Gewichtung, so wird der untere Selektor verwendet, da der Browser von oben nach unten liest und dabei die zuletzt gelesenen Werte setzt.
Was geschieht bei !important?
Mit !important getagte Selektoren werden immer priorisiert. Selbst Attribute-Styles können damit überschrieben werden. Daher sollte !important möglichst selten verwendet werden.
Der Hintergrund des divs wird hier gelb gefärbt.
Besondere Selektoren:
Deprecated Selektoren und (*)-Selektoren werden bei der Spezifität nicht berücksichtigt. Die Pseudoklasse :not() wird ebenfalls nicht bewertet, jedoch der Inhalt in der Klammer.
Merke:
Die CSS-Spezifität ist ein wichtiger Bestandteil in der Frontendentwicklung. Die Gewichtung kann man sich leicht merken:
- Attribute-Style > ID > Pseudoklasse oder CSS-Klasse > HTML-Element
Zu beachten sind einige wenige Ausnahmen:
- !important wird immer priorisiert
- Pseudo-class :not(), (*) und deprecated Selektoren werden für die Spezifität nicht berücksichtigt
Die Webfrontend-AG wünscht ein schönes Wochenende!
Mehr über Frontend Entwicklung erfahren
Quellen:
Specifics on CSS Specificity [1]
Spezifität: das Punktesystem für Selektoren [2]
Calculating a selector’s specificity [3]
