Spezifität

The CSS Podcast – 003: Spezifität

Angenommen, Sie arbeiten mit dem folgenden HTML- und CSS-Code:

<button class="branding">Hello, Specificity!</button>

.branding {
  color: blue;
}

button {
  color: red;
}

Hier sind zwei Regeln zu sehen, die auf dasselbe Element ausgerichtet sind. Jede Regel enthält eine Deklaration, mit der die Farbe der Schaltfläche festgelegt werden soll: Die eine versucht, die Schaltfläche rot zu färben, die andere blau. Welche Deklaration wird auf das Element angewendet?

Der CSS-Spezifizitätsalgorithmus ist der Schlüssel zum Verständnis, wie CSS zwischen konkurrierenden Deklarationen entscheidet.

Spezifität ist eine der verschiedenen Stufen der Kaskade, die im letzten Modul zur Kaskade behandelt wurde.

Bewertung der Spezifität

Jede Auswahlregel innerhalb eines Ursprungs erhält eine Bewertung. Sie können Spezifität als Gesamtpunktzahl betrachten, für die jeder Auswahltyp Punkte erhält. Deklarationen aus Regeln mit der höchsten Spezifität werden berücksichtigt.

Bei einem konkreten Projekt besteht die Herausforderung darin, dafür zu sorgen, dass die CSS-Regeln, die Sie anwenden möchten, tatsächlich angewendet werden, und gleichzeitig die Bewertungen niedrig zu halten, um Komplexität zu vermeiden. Die Spezifität sollte nur so hoch sein, wie es erforderlich ist, anstatt auf die bestmögliche Spezifität zu zielen. Möglicherweise müssen in Zukunft einige wirklich wichtigere CSS-Regeln angewendet werden. Wenn Sie die höchste Spezifität anstreben, erschweren Sie sich diese Aufgabe.

Die Spezifität ist keine Dezimalzahl, sondern eine Triade, die aus drei Komponenten besteht: A, B und C.

  • A: ID-ähnliche Spezifität
  • B: klassenähnliche Spezifität
  • C: elementähnliche Spezifität

Sie wird oft mit der (A,B,C)-Notation dargestellt. Beispiel: (1,0,2) Die alternative A-B-C-Notation wird ebenfalls häufig verwendet.

Ein Diagramm mit den drei Komponenten der Spezifität (A,B,C) Für jede Komponente wird im Diagramm dargestellt, was sie darstellt, und einige Beispielauswahlen, die sich darauf auswirken.
Ein Diagramm, das zeigt, auf welche Komponente der Spezifität sich verschiedene Auswahlmechanismen auswirken.

Besonderheiten vergleichen

Spezifitäten werden durch Vergleich der drei Komponenten in der Reihenfolge verglichen: Die Spezifität mit dem größeren A-Wert ist spezifischer. Wenn die beiden A-Werte gleich sind, ist die Spezifität mit dem größeren B-Wert spezifischer. Wenn auch die beiden B-Werte gleich sind, ist die Spezifität mit dem größeren C-Wert spezifischer. Wenn alle Werte gleich sind, sind die beiden Spezifitäten gleich.

Beispielsweise gilt (1,0,0) als spezifischer als (0,4,3), da der A-Wert in (1,0,0) (1) größer ist als der A-Wert in (0,4,3) (0).

Selektoren beeinflussen die Spezifität

Jeder Teil der Spezifitätstriade beginnt mit dem Wert 0. Die Standardspezifizität ist also (0,0,0). Jeder Teil eines Selektors erhöht die Spezifität, was je nach Typ des Selektors den Wert von A, B oder C erhöht.

Universalauswahl

Ein universeller Selector (*) erhöht die Spezifität nicht und belässt den Wert bei der ursprünglichen Spezifität von (0,0,0).

* {
  color: red;
}

Element- oder Pseudoelement-Selektor

Ein Element (Typ) oder Pseudoelement-Selektor fügt eine elementähnliche Spezifität hinzu, wodurch die C-Komponente um 1 erhöht wird.

Die folgenden Beispiele haben eine Gesamtspezifität von (0,0,1).

Typauswahl

div {
  color: red;
}

Pseudo-Element-Selektor

::selection {
  color: red;
}

Klassen-, Pseudoklassen- oder Attributselektor

Mit einer Klasse, einem Pseudo-Klassen- oder einem Attribut-Sellektor wird eine klasseähnliche Spezifität hinzugefügt, wodurch die B-Komponente um 1 erhöht wird.

Die folgenden Beispiele haben eine Spezifität von (0,1,0).

Klassenauswahl

.my-class {
  color: red;
}

Pseudo-Klassenauswahl

:hover {
  color: red;
}

Attributauswahl

[href='#'] {
  color: red;
}

ID-Auswahl

Ein ID-Selektor fügt eine ID-ähnliche Spezifität hinzu, wodurch die C-Komponente um 1 erhöht wird. Voraussetzung ist, dass Sie einen ID-Selektor (#myID) und keinen Attributselektor ([id="myID"]) verwenden.

Im folgenden Beispiel ist die Spezifität (1,0,0).

#myID {
  color: red;
}

Andere Auswahlmöglichkeiten

CSS hat viele Selektoren. Nicht alle sind ausschlaggebend. Die Pseudoklasse :not() trägt beispielsweise nicht zur Berechnung der Spezifität bei.

Die als Argumente übergebenen Auswahlkriterien werden jedoch in die Berechnung der Spezifität einbezogen.

div:not(.my-class) {
  color: red;
}

Dieses Beispiel hat eine Spezifität von (0,1,1), da es einen Typauswahl- (div) und eine Klasse innerhalb des :not() hat.

Wissen testen

Ihr Wissen über die Bewertung der Spezifität testen

Was ist die Spezifität von a[href="#"]?

(0,0,1)
Das a hat den Wert (0,0,1), das [href="#"] hingegen den Wert (0,1,0).
(0,1,0)
Versuch es noch einmal. Das a hat den Wert (0,0,1), das [href="#"] hingegen den Wert (0,1,0).
(0,1,1)
Der Wert von a ist (0,0,1) und der Wert von [href="#"] ist (0,1,1). Die Gesamtspezifität beträgt also (0,1,1).

Faktoren, die sich nicht auf die Spezifität auswirken

Es gibt einige häufige Missverständnisse zu den folgenden Faktoren, die sich auf die Spezifität auswirken.

Inline-Stilattribute

CSS, das direkt auf das style-Attribut eines Elements angewendet wird, hat keine Auswirkungen auf die Spezifität, da es sich um einen anderen Schritt in der Kaskade handelt, der vor der Spezifität ausgewertet wird.

<div style="color: red"></div>

Wenn Sie diese Deklaration in einem Stylesheet überschreiben möchten, müssen Sie dafür sorgen, dass die Deklaration in einem früheren Schritt der Kaskade übereinstimmt.

Sie können ihm beispielsweise !important hinzufügen, damit es Teil des !important-Ursprungs mit Autorisierung wird.

!important Erklärungen

Ein !important am Ende einer CSS-Deklaration wirkt sich nicht auf die Spezifität aus, sondern ordnet die Deklaration einem anderen Ursprung zu, nämlich Autorisierte !important.

Im folgenden Beispiel ist die Spezifität von .my-class für den Sieg der !important-Deklaration nicht relevant.

.my-class {
  color: red !important;
  color: white;
}

Wenn zwei Deklarationen !important sind, kommt die Spezifität wieder ins Spiel, da der Ursprungsschritt der Kaskade den Gewinner noch nicht ermitteln konnte.

.branding {
  color: blue !important;
}

button {
  color: red !important;
}

Spezifität im Kontext

Bei komplexen oder zusammengesetzten Auswählen wird die Spezifität durch jeden Teil der Auswahl bestimmt. Betrachten Sie dieses Beispiel für HTML:

<a class="my-class another-class" href="#">A link</a>

Dieser Link enthält zwei Klassen. Die Regel im folgenden CSS hat eine Spezifizität von (0,0,1):

a {
  color: red;
}

Wenn Sie in der Auswahl auf eine der Klassen verweisen, hat sie jetzt eine Spezifizität von (0,1,1):

a.my-class {
  color: green;
}

Fügen Sie der Auswahl die andere Klasse hinzu. Sie hat jetzt eine Spezifizität von (0,2,1):

a.my-class.another-class {
  color: rebeccapurple;
}

Fügen Sie dem Selektor das Attribut href hinzu. Es hat jetzt eine Spezifizität von (0,3,1):

a.my-class.another-class[href] {
  color: goldenrod;
}

Fügen Sie abschließend die Pseudoklasse :hover hinzu. Der Selektor hat dann eine Spezifizität von (0,4,1):

a.my-class.another-class[href]:hover {
  color: lightgrey;
}

Wissen testen

Ihr Wissen über die Bewertung der Spezifität testen

Welche der folgenden Auswahlschaltflächen hat eine Spezifität von (0,2,1)?

article > section
Elemente verleihen dem Design eine elementspezifische Präzision (Komponente C). Der Selektor enthält zwei Elemente, was einer Spezifität von (0,0,2) entspricht.
article.card.dark
Elemente fügen elementspezifische Informationen hinzu (Komponente C), Klassen fügen klassenspezifische Informationen hinzu (Komponente B). Mit zwei Klassen und einem Element hat dieser Selektor eine Spezifität von (0,2,1).
article:hover a[href]
Elemente fügen elementspezifische Spezifikationen hinzu (Komponente C), Pseudoklassen und Attribute fügen klassenspezifische Spezifikationen hinzu (Komponente B). Es gibt zwei Elementselektoren (2 × (0,0,1)), einen Attributselektor ((0,0,1)) und einen Klassenselektor ((0,0,1)). Die Gesamtspezifität dieses Selektors beträgt also (0,2,2).

Pragmatischer werden

Angenommen, Sie haben folgendes CSS:

.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

In HTML sieht das so aus:

<button class="my-button" onclick="alert('hello')">Click me</button>

Die Schaltfläche hat einen grauen Hintergrund, da der zweite Selektor eine Spezifität von (0,1,1) hat. Das liegt daran, dass es einen Typselektor (button) hat, nämlich (0,0,1), und einen Attributselektor ([onclick]), nämlich (0,1,0).

Die vorherige Regel .my-button entspricht (0,1,0), da sie eine Klassenauswahl hat, was eine geringere Spezifität als (0,1,1) bedeutet.

Wenn Sie diese Regel verstärken möchten, können Sie die Klassenauswahl so wiederholen:

.my-button.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

Jetzt hat die Schaltfläche einen blauen Hintergrund, da der neue Auswahlmechanismus eine Spezifität erhält.(0,2,0)

Bei gleicher Spezifität wird der nächste Schritt in der Kaskade ausgeführt.

Bleiben wir vorerst beim Beispiel mit der Schaltfläche und ändern das CSS in Folgendes:

.my-button {
  background: blue;
}

[onclick] {
  background: grey;
}

Die Schaltfläche hat einen grauen Hintergrund, da beide Selektoren dieselbe Spezifität von (0,1,0) haben.

Wenn Sie die Regeln in der Quellreihenfolge ändern, wird die Schaltfläche blau.

[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}

Das liegt daran, dass beide Auswahlmöglichkeiten dieselbe Spezifität haben. In diesem Fall greift die Kaskade auf den Schritt „Reihenfolge der Erscheinung“ zurück.

Ressourcen