CSS-Spezifizität-Rechner

CSS-Spezifizität ist ein Gewichtssystem, das bestimmt, welche CSS-Regel gilt, wenn mehrere Regeln auf das gleiche Element abzielen. Sie wird als dreistelliger Wert (a,b,c) berechnet: a zählt ID-Auswahlen, b zählt Klassen-Auswahlen, Attribute-Auswahlen und Pseudo-Klassen, und c zählt Typ-Auswahlen und Pseudo-Elemente. Ein höherer Wert in einer früheren Position gewinnt immer, unabhängig von späteren Positionen.

Laut CSS-Auswahlen Level 4 hat die Spezifizität der Pseudo-Klassen :is(), :not() und :has() die Spezifizität der spezifiziertesten Auswahl in ihrer Argumentliste. Zum Beispiel hat :is(.foo, #bar) die Spezifizität von #bar (1,0,0), weil es die spezifizierteste Argumentliste ist. Die Pseudo-Klasse :where() ist die Ausnahme – sie trägt immer null Spezifizität bei.

Ja. Wenn zwei Auswahlen genau die gleiche Spezifizität haben, gilt die Regel des CSS-Cascades: Die Regel, die später im Quellcode steht, gewinnt. Deshalb ist das Verständnis der Spezifizität wichtig – eine Abhängigkeit von der Quellreihenfolge kann zu instabilen Stylesheets führen, die bei der Umordnung der Regeln brachen.

Der Spezifizitätsalgorithmus vergleicht die Werte von links nach rechts. Eine ID-Auswahl hat den Wert (1,0,0), während eine beliebige Anzahl von Klassen-Auswahlen nur die zweite Position erhöht. Da Position a vor Position b verglichen wird, wird selbst eine einzelne ID-Auswahl immer eine beliebige Kombination aus Klassen, Attributen oder Pseudo-Klassen-Auswahlen überschreiten, unabhängig von der Anzahl.