Spezifität

The CSS Podcast – 003: Specificity

Angenommen, Sie arbeiten mit folgendem HTML- und CSS-Code:

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

button {
  color: red;
}

.branding {
  color: blue;
}

Es gibt zwei konkurrierende Regeln. Das eine färbt die Schaltfläche rot, das andere blau. Welche Regel wird auf das Element angewendet? Wenn Sie wissen, wie das Preisvergleichsportal zwischen konkurrierenden Regeln entscheidet, sollten Sie den Algorithmus der CSS-Spezifikation in Bezug auf die Spezifität verstehen.

Spezifität ist eine der vier unterschiedlichen Phasen der Kaskade, die im letzten Modul in der Kaskade behandelt wurde.

Spezifitätsbewertung

Jede Selektorregel erhält eine Bewertung. Sie können sich die Spezifität als Gesamtpunktzahl vorstellen und für jeden Selektortyp Punkte sammeln. Die Auswahl mit der höchsten Punktzahl gewinnt.

Bei einem realen Projekt müssen die CSS-Regeln so spezifisch sein, dass sie tatsächlich auch tatsächlich angewendet werden. Gleichzeitig sollten die Werte niedrig bleiben, um Komplexität zu vermeiden. Die Punktzahl sollte nur so hoch wie nötig sein, anstatt den höchstmöglichen Wert zu erzielen. Zukünftig müssen jedoch möglicherweise wichtigere Preisvergleichsportale angewendet werden. Wenn Sie die höchste Punktzahl erzielen, wird Ihnen dieser Job schwerfallen.

Bewertung für jeden Selektortyp

Für jeden Selektortyp erhältst du Punkte. Sie addieren alle diese Punkte, um die Gesamtspezifität eines Selektors zu berechnen.

Universalselektor

Ein Universalselektor (*) ist nicht spezifisch und erhält 0 Punkte. Das bedeutet, dass jede Regel mit 1 oder mehr Punkten sie überschreibt

* {
  color: red;
}

Element- oder Pseudoelementselektor

Ein Selektor Element (Typ) oder Pseudoelement erhält 1 Punkt der Spezifität .

Typauswahl

div {
  color: red;
}

Pseudoelementselektor

::selection {
  color: red;
}

Klassen-, Pseudoklassen- oder Attributauswahl

Ein class-, pseudo-class- oder Attribut-Selektor erhält 10 Points of Specificity.

Klassenauswahl

.my-class {
  color: red;
}

Pseudoklassenauswahl

:hover {
  color: red;
}

Attributauswahl

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

Die Pseudoklasse :not() selbst trägt nichts zur Berechnung der Spezifität bei. Die als Argumente übergebenen Selektoren werden jedoch der Spezifitätsberechnung hinzugefügt.

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

Dieses Beispiel hätte 11 Punkte Spezifität, da es einen Typselektor (div) und eine Klasse innerhalb von :not() hat.

ID-Auswahl

Ein ID-Selektor erhält 100 Spezifitätspunkte, sofern Sie einen ID-Selektor (#myID) und keinen Attributselektor ([id="myID"]) verwenden.

#myID {
  color: red;
}

Inline-Stilattribut

CSS-Code, der direkt auf das Attribut style des HTML-Elements angewendet wird,erhält einen Spezifitätswert von 1.000 Punkten. Das bedeutet, dass Sie einen sehr spezifischen Selektor schreiben müssen, um ihn in CSS zu überschreiben.

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

!important Regel

Ein !important am Ende eines CSS-Werts erhält einen Spezifitätswert von 10.000 Punkten. Dies ist die höchste Spezifität, die ein einzelnes Element erhalten kann.

Eine !important-Regel wird auf eine CSS-Eigenschaft angewendet. Daher erhalten alle Elemente in der Gesamtregel (Selektor und Attribute) nicht denselben Spezifitätswert.

.my-class {
  color: red !important; /* 10,000 points */
  background: white; /* 10 points */
}

Überprüfen Sie Ihr Wissen

Testen Sie Ihr Wissen über Spezifitätsbewertungen

Spezifität im Kontext

Die Spezifität jedes Selektors, der mit einem Element übereinstimmt, wird addiert. Sehen Sie sich dieses HTML-Beispiel an:

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

Dieser Link enthält zwei Klassen. Wenn Sie den folgenden CSS-Code hinzufügen, erhalten Sie einen spezifischen Punkt:

a {
  color: red;
}

Wenn Sie auf eine der Klassen in dieser Regel verweisen, hat sie jetzt 11 Spezifitätspunkte:

a.my-class {
  color: green;
}

Fügen Sie dem Selektor die andere Klasse hinzu. Sie hat jetzt 21 Spezifitätspunkte:

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

Fügen Sie dem Selektor das Attribut href hinzu. Er hat jetzt 31 Spezifitätspunkte:

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

Fügen Sie schließlich dem Ganzen eine Pseudoklasse :hover hinzu. Der Selektor hat schließlich 41 Points of Spezifität:

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

Überprüfen Sie Ihr Wissen

Testen Sie Ihr Wissen über Spezifitätsbewertungen

Spezifität visualisieren

In Diagrammen und Spezifitätsrechnern wird die Spezifität oft so dargestellt:

Die linke Gruppe sind id-Selektoren. Die zweite Gruppe sind Klassen-, Attribut- und Pseudoklassenselektoren. Die letzte Gruppe sind Element- und Pseudoelement-Selektoren.

Der folgende Selector ist beispielsweise 0-4-1:

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

Überprüfen Sie Ihr Wissen

Testen Sie Ihr Wissen zur Spezifitätsvisualisierung

Pragmatisch höhere Spezifität

Angenommen, Sie haben CSS-Code, der so aussieht:

.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

Mit HTML-Code, der so aussieht:

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

Die Schaltfläche hat einen grauen Hintergrund, weil der zweite Selektor 11 Punkte Spezifität (0-1-1) erhält. Dies liegt daran, dass sie einen Typ-Selektor (button) hat, nämlich 1 Punkt, und einen Attribut-Selektor ([onclick]) mit 10 Punkten.

Die vorherige Regel – .my-button – erhält 10 Punkte (0-1-0), da sie einen Klassenselektor hat.

Wenn Sie diese Regel verbessern möchten, wiederholen Sie die Klassenauswahl so:

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

button[onclick] {
  background: grey;
}

Jetzt hat die Schaltfläche einen blauen Hintergrund, da der neue Selektor einen Spezifitätswert von 20 Punkten (0-2-0) erhält.

Ein übereinstimmender Spezifitätswert gewinnt die neueste Instanz

Bleiben wir beim Beispiel mit der Schaltfläche und ändern den CSS-Code wie folgt:

.my-button {
  background: blue;
}

[onclick] {
  background: grey;
}

Die Schaltfläche hat einen grauen Hintergrund, da beide Selektoren denselben Spezifitätswert haben (0-1-0).

Wenn Sie die Regeln in der Reihenfolge der Quelle ändern, ist die Schaltfläche blau.

[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}

Nur in diesem Fall gewinnt neueres Preisvergleichsportal. Dazu muss sie mit der Spezifität eines anderen Selektors übereinstimmen, der auf dasselbe Element ausgerichtet ist.

Ressourcen

• CSS-Spezifikation
• Spezifitätsrechner
• MDN-Spezifikation
• Details zur CSS-Spezifität
• Weiterer Spezifitätsrechner