Was wissen Sie über die Spezifität von…

Die Spezifität bestimmt die Priorität der CSS-Regeln im Falle eines Konflikts, wenn verschiedene Stile auf dasselbe Element angewendet werden. Sie wird für jeden Selektor in der Regel berechnet.

Die Spezifität ist eine numerische Bewertung, die aus vier Kategorien (A, B, C, D) besteht und als 0,0,0,0 geschrieben wird. Je höher die Zahl, desto höher die Spezifität.

Kategorien:

A (Inline-Style): Stile, die durch das style-Attribut im HTML-Element festgelegt sind. Sie haben die höchste Spezifität (z.B. 1,0,0,0).
B (ID): Selektoren nach ID (z.B. #meine-id). Erhöhen die zweite Ziffer (z.B. 0,1,0,0).
C (Klasse, Attribut, Pseudo-Klasse): Selektoren nach Klasse (z.B. .meine-klasse), Attribut (z.B. [type="text"]), Pseudo-Klasse (z.B. :hover, :first-child). Erhöhen die dritte Ziffer (z.B. 0,0,1,0).
D (Element, Pseudo-Element): Selektoren nach HTML-Tag (z.B. div, p) und Pseudo-Elementen (z.B. ::before, ::after). Erhöhen die vierte Ziffer (z.B. 0,0,0,1).

Beispielberechnung:

p - 0,0,0,1
.meine-klasse - 0,0,1,0
#meine-id - 0,1,0,0
div p - 0,0,0,2 (Summe der Spezifitäten der beiden Elemente)
#meine-id .meine-klasse - 0,1,1,0 (Summe von ID und Klasse)
div#meine-id.meine-klasse:hover - 0,1,2,1 (Summe von Tag, ID, Klasse und Pseudo-Klasse)

Regeln:

Die Spezifität des Inline-Styles ist immer höher als jede Kombination anderer Selektoren, außer bei Regeln mit dem !important-Flag.
Regeln mit dem !important-Flag haben die höchste Priorität und überschreiben sogar Inline-Styles. Die Verwendung von !important wird aufgrund der Debugging-Komplexität nicht empfohlen.
Bei gleicher Spezifität gilt die zuletzt im CSS deklarierte Regel.
Der universelle Selektor (*) und :where() haben eine Spezifität von 0,0,0,0 und erhöhen die Gesamtspezifität nicht.

/*
  Spezifität: 0,0,0,1
  Wird angewendet, wenn keine spezifischeren Regeln vorhanden sind
*/
p {
  color: blue;
}

/*
  Spezifität: 0,0,1,0
  Überschreibt die Regel für das Tag p
*/
.text {
  color: green;
}

/*
  Spezifität: 0,1,0,0
  Überschreibt die Regel für die Klasse .text
*/
#haupt-text {
  color: red;
}

/*
  Spezifität: 1,0,0,0
  Wird angewendet, wenn das Element das Attribut style="color: purple;" hat
*/
/* <p style="color: purple;">Text</p> */

/*
  Sehr hohe Spezifität, überschreibt alles
  Nicht empfohlen, außer bei äußerster Notwendigkeit
*/
.override-text {
  color: black !important;
}

Was wissen Sie über die Spezifität von CSS-Selektoren?