CSS nesting and specificity

& 중첩 선택자의 specificity 는 연관되어 있는 선택자 목록 중 가장 큰 명시도를 가진 것을 사용하여 계산됩니다. 이는 :is() 함수를 사용할 때 명시도가 계산되는 방식과 동일합니다.

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

& 중첩 문법

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

.foo c {
  color: red;
}

:is() 문법

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

.foo c {
  color: red;
}

이 예제에서 id 선택자 (#a) 는 1-0-0 의 명시도를 보유하고 있고, 타입 선택자 (b) 는 0-0-1 의 명시도를 보유하고 있습니다. #a id 선택자가 전혀 사용되지 않았더라도 & 중첩 선택자 와 :is() 가상 클래스는 모두 1-0-0 의 명시도를 보유합니다.

.foo 클래스 선택자는 0-1-0 의 명시도를 보유하고 있습니다. 이는 & c 의 총 명시도를 1-0-1 로 만들고 .foo c 의 명시도를 0-1-1 로 만들며, 따라서 color: blue; 가 채택됩니다.

같이 보기