CSS-Verschachtelung und Spezifität
Die Spezifität des &-Verschachtelungsselectors wird basierend auf der größten Spezifität in der zugehörigen Selector-Liste berechnet. Dies ist identisch mit der Berechnung der Spezifität bei Verwendung der :is()-Funktion.
html
<b class="foo">
<i>Blue text</i>
</b>
&-Verschachtelungssyntax
css
#a, b {
& i {
color: blue;
}
}
.foo i {
color: red;
}
:is()-Syntax
css
:is(#a, b) {
& i {
color: blue;
}
}
.foo i {
color: red;
}
In diesem Beispiel hat der ID-Selector (#a) eine Spezifität von 1-0-0, während der Typen-Selector (b) eine Spezifität von 0-0-1 hat. Der &-Verschachtelungsselector und die :is()-Pseudoklasse haben beide eine Spezifität von 1-0-0, obwohl der #a-ID-Selector 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 & i und 0-1-1 für .foo i, was bedeutet, dass color: blue; gewinnt.