CSS nesting and specificity

Specificity của nesting selector & được tính toán dựa trên specificity lớn nhất trong danh sách selector liên quan. Điều này giống hệt cách specificity được tính khi sử dụng hàm :is().

html

<b class="foo">
  <i>Blue text</i>
</b>

Cú pháp nesting `&`

css

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

.foo i {
  color: red;
}

Cú pháp `:is()`

css

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

.foo i {
  color: red;
}

Trong ví dụ này, id selector (#a) có specificity là 1-0-0, trong khi type selector (b) có specificity là 0-0-1. Nesting selector & và pseudo-class :is() đều nhận specificity là 1-0-0, dù id selector #a không bao giờ được sử dụng.

Class selector .foo có specificity là 0-1-0. Điều này làm cho tổng specificity của & i là 1-0-1 và của .foo i là 0-1-1, nghĩa là color: blue; sẽ thắng.