CSS nesting and specificity

& 중첩 문법

#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 중첩 사용하기
• 중첩 @-규칙