Spezifität

The CSS Podcast – 003: Specificity

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

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

.branding {
  color: blue;
}

button {
  color: red;
}

Hier gibt es zwei Regeln, die auf dasselbe Element ausgerichtet sind. Jede Regel enthält eine Deklaration, mit der die Farbe des Buttons festgelegt werden soll: In der einen wird versucht, den Button rot zu färben, in der anderen blau. Welche Deklaration wird auf das Element angewendet?

Wenn Sie den CSS-Spezifitätsalgorithmus verstehen, wissen Sie auch, wie CSS zwischen konkurrierenden Deklarationen entscheidet.

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

Bewertung der Spezifität

Jede Selektorregel innerhalb eines Ursprungs erhält eine Punktzahl. Die Spezifität kann als Gesamtwert betrachtet werden, wobei jeder Selektortyp Punkte für diesen Wert erhält. Deklarationen aus Regeln mit der höchsten Spezifität haben Vorrang.

Bei der Spezifität in einem echten Projekt besteht die Herausforderung darin, dafür zu sorgen, dass die CSS-Regeln, die Sie anwenden möchten, auch tatsächlich angewendet werden, während die Werte im Allgemeinen niedrig gehalten werden, um Komplexität zu vermeiden. Die Spezifität sollte nur so hoch sein, wie wir sie benötigen, anstatt die höchstmögliche Spezifität anzustreben. In Zukunft muss möglicherweise wichtigeres CSS angewendet werden. Wenn Sie die höchste Spezifität anstreben, wird es schwierig.

Die Spezifität ist keine Dezimalzahl, sondern ein Dreiklang aus drei Komponenten: A, B und C.

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

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

Spezifitäten vergleichen

Die Spezifitäten werden verglichen, indem die drei Komponenten in der folgenden Reihenfolge verglichen werden: Die Spezifität mit einem größeren A-Wert ist spezifischer. Wenn die beiden A-Werte gleich sind, ist die Spezifität mit einem größeren B-Wert spezifischer. Wenn die beiden B-Werte ebenfalls gleich sind, ist die Spezifität mit einem 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 des Spezifitätstrios beginnt mit dem Wert 0. Die Standardspezifität ist also (0,0,0). Jeder Teil eines Selektors erhöht die Spezifität, wodurch je nach Selektortyp der Wert von A, B oder C erhöht wird.

Universalselektor

Ein universeller Selektor (*) fügt keine Spezifität hinzu. Der Wert bleibt bei der ursprünglichen Spezifität von (0,0,0).

* {
  color: red;
}

Element- oder Pseudoelement-Selektor

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

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

Typauswahl

div {
  color: red;
}

Pseudoelement-Selektor

::selection {
  color: red;
}

Klassen-, Pseudoklassen- oder Attributselektor

Ein Klassen-, Pseudoklassen- oder Attributselektor fügt klassenspezifische Spezifität hinzu, 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;
}

Pseudoklassenselektor

:hover {
  color: red;
}

Attributauswahl

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

ID-Selektor

Ein ID-Selektor fügt ID-ähnliche Spezifität hinzu, wodurch die A-Komponente um 1 erhöht wird, sofern 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 Selektoren

CSS hat viele Selektoren. Nicht alle davon machen die Antwort spezifischer. Die Pseudoklasse :not() trägt beispielsweise nichts zur Berechnung der Spezifität bei.

Die Spezifität der Pseudoklasse :not() wird durch die Spezifität des spezifischsten Selektors im kommagetrennten Argument der Selektoren ersetzt. Sie entspricht der Spezifität, die sich ergeben hätte, wenn :not(:is(argument)) geschrieben worden wäre.

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

Die Pseudoklasse :is() wird auch nicht in die Berechnung der Spezifität einbezogen. Wie bei :not() wird die Spezifität des spezifischsten Arguments verwendet.

:is(h1, h2, h3) {
  color: blue;
}

Dieses Beispiel hat eine Spezifität von (0,0,1), da es nur eine Art von Selektor (type) enthält.

Durch Hinzufügen eines id steigt die Spezifität auf (1,0,0).

:is(h1, h2, h3, #my-heading) {
  color: blue;
}

Die Pseudoklasse :where() ist anders. Unabhängig von der Spezifität der Argumente hat sie immer eine Spezifität von (0,0,0).

:where(h1, h2, h3, #my-heading) {
  color: blue;
}

Die mit :where() angewendeten Stile mit geringer Spezifität ermöglichen es Ihnen, diese Stile später in Ihrem Stylesheet mit einfachen Selektoren zu überschreiben:

:where(#my-content) {
   color: red;
}

p {
   color: blue;
}

Obwohl :where() ein id in der Argumentliste hat, hat es immer noch nur eine Spezifität von (0, 0, 0). Daher wird es vom einfachen Selektor p überschrieben und der Text ist blue.

Dein Wissen wird getestet

Wissen zur Berechnung der Spezifität testen

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

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

.branding {
  color: blue !important;
}

button {
  color: red !important;
}

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

a {
  color: red;
}

a.my-class {
  color: green;
}

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

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

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

.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

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

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

button[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}

[onclick] {
  background: grey;
}

[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}