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

<b>  <c>Blue text</c></b>

& 중첩 문법

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

:is() 문법

: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; 가 채택됩니다.

같이 보기

• CSS 중첩 모듈
• & 중첩 선택자
• CSS 중첩 사용하기
• 중첩 @-규칙