CSS-Verschachtelung und Spezifität

Die specificity des &-Verschachtelungsselectors wird anhand der höchsten Spezifität in der zugehörigen Selektorliste berechnet. Dies entspricht der Berechnung der Spezifität bei Verwendung der :is()-Funktion.

html
<b class="foo">
  <c>Blue text</c>
</b>

&-Verschachtelungssyntax

css
#a, b {
  & c {
    color: blue;
  }
}

.foo c {
  color: red;
}

:is()-Syntax

css
:is(#a, b) {
  & c {
    color: blue;
  }
}

.foo c {
  color: red;
}

In diesem Beispiel hat der ID-Selektor (#a) eine Spezifität von 1-0-0, während der Typselektor (b) eine Spezifität von 0-0-1 hat. Der &-Verschachtelungsselektor und die :is()-Pseudoklasse haben beide eine Spezifität von 1-0-0, obwohl der #a-ID-Selektor nie verwendet wird.

Der .foo-Klassenselektor hat eine Spezifität von 0-1-0. Dadurch ergibt sich eine Gesamtspezifität von 1-0-1 für & c und 0-1-1 für .foo c, was bedeutet, dass color: blue; den Vorrang hat.

Siehe auch