Was ist Spezifität in CSS?

Die Spezifität in CSS ist ein Mechanismus, der bestimmt, welche Stilregel auf ein Element angewendet wird, wenn mehrere Regeln zutreffen.

Jeder Selektor hat seine eigene Punktzahl für die Spezifität. Eine höhere Punktzahl bedeutet eine höhere Priorität.

Die Berechnung der Spezifität basiert auf der Anzahl der folgenden Komponenten im Selektor (in absteigender Wichtigkeit):

• Hunderter (1000): Regeln mit !important (haben die höchste Priorität, aber ihre Verwendung wird nicht empfohlen).
• Hunderter (100): Inline-Stile (direkt im style-Attribut des HTML-Elements geschrieben).
• Hunderter (100): Identifikatoren (Selektoren nach id, z.B. #mein-element).
• Zehner (10): Klassen (z.B. .klasse), Pseudoklassen (z.B. :hover, :focus), Attribute (z.B. [type="text"]).
• Einer (1): Elementtypen (HTML-Tag-Namen, z.B. div, p), Pseudoelemente (z.B. ::before, ::after).
• Null (0): Universeller Selektor (*), Kombinatoren (>, +, ~), Elternelement-Selektoren (:not(), :is(), :where()) tragen an sich keine Spezifität bei, können aber innerhalb der Klammern die Spezifität beeinflussen.

Beispiel für die Berechnung:

• p { ... } - Spezifität: 0-0-0-1
• .meine-klasse { ... } - Spezifität: 0-0-1-0
• #mein-id { ... } - Spezifität: 0-1-0-0
• div.meine-klasse { ... } - Spezifität: 0-0-1-1
• ul > li.klasse[data-id="1"] { ... } - Spezifität: 0-0-2-2 (li, ul = 2; .klasse, [data-id="1"] = 2)

Wenn zwei Regeln die gleiche Spezifität haben, wird die Regel angewendet, die weiter unten in der CSS-Datei steht.

Beispiel:

/* Datei style.css */
.mein-element {
  farbe: blau; /* Spezifität: 0-0-1-0 */
}

#element-id {
  farbe: rot; /* Spezifität: 0-1-0-0 */
}

.mein-element {
  schriftgewicht: fett; /* Spezifität: 0-0-1-0, überschreibt die vorherige Regel mit derselben Spezifität */
}

In diesem Fall wird der Text des Elements mit der ID element-id rot sein, und der Text des Elements mit der Klasse mein-element wird blau und fett (blau wird durch rot überschrieben, weil #element-id eine höhere Spezifität hat).

Das Verständnis der Spezifität ist wichtig, um vorhersehbares und wartbares CSS zu schreiben. Vermeiden Sie zu komplexe Spezifität und die Verwendung von !important für eine bessere Steuerung der Stile.