It’s #FrontendFriday – CSS-Spezifität

12.03.2021

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:

Beispiel Code

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.

 

Beispiel Code

Hier wird der 2te CSS-Selektor verwendet und das Icon wird rot gefärbt.

 

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.

Beispiel Code

Beispiel Code

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!


Quellen:

Specifics on CSS Specificity [1]

Spezifität: das Punktesystem für Selektoren [2]

Calculating a selector’s specificity [3]

Zurück zur Übersicht

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*Pflichtfelder

*

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.