Die Spezifität entscheidet, welcher von mehreren Selektoren gewinnt. Sie ist kein Punktestand, sondern ein Vergleich in drei Spalten.
- Spezifität (Specificity)
Gewicht eines Selektors, mit dem der Browser entscheidet, welche von mehreren Regeln für ein Element gilt.
Beispiel: „Die Spezifität wird nicht addiert, sondern spaltenweise verglichen.“
Drei Spalten
MDN beschreibt den Wert als a three-column value of three categories or weights - ID, CLASS, and TYPE. Eine ID zählt 1-0-0, eine Klasse, ein Attributselektor oder eine Pseudoklasse 0-1-0, ein Element oder Pseudoelement 0-0-1.
Verglichen wird von links: The selector with the greater value in the ID column wins no matter what the values are in the other columns. Vier Klassen verlieren also gegen eine einzige ID.
Was nicht zählt
Der Universalselektor und :where() zählen nichts, Kombinatoren wie der Pfeil erhöhen den Wert nicht. Bei vollständigem Gleichstand gewinnt die zuletzt notierte Regel.
Was folgt daraus
Flache Selektoren halten ein Stylesheet beweglich. Wer mit IDs gestaltet, baut sich Regeln, die sich später nur noch mit !important korrigieren lassen, und das ist der Anfang eines Wettrüstens.