Thespecificity of the& nesting selector is calculated using the largest specificity in the associated selector list. This is identical to how specificity is calculated when using the:is() function.

<b>  <i>Blue text</i></b>

& nesting syntax

#a, b {  & i {    color: blue;  }}.foo i {  color: red;}

:is() syntax

:is(#a, b) {  & i {    color: blue;  }}.foo i {  color: red;}

In this example, the id selector (#a) has a specificity of1-0-0, while the type selector (b) has a specificity of0-0-1. The& nesting selector and:is() pseudo-class both take a specificity of1-0-0, even though the#a id selector is never used.

The.foo class selector has a specificity of0-1-0. This makes the total specificity1-0-1 for& i and0-1-1 for.foo i, meaning thatcolor: blue; wins out.

See also

• CSS nesting module
• & nesting selector
• Using CSS nesting
• Nesting at-rules