[css] & nesting 선택자

일반 css에서도 네스팅 선택자 사용이 가능함~

브라우저 호환성도 최신 브라우저에서는 대부분 지원하고 있음.

 

scss에서 사용하는 nesting 선택자는 사전에 컴파일이 되지만,

일반 css에서의 nesting 선택자는 브라우저에 의해 파싱이 된다고 함. 

 

한 가지 유의할 점이 태그 선택자와 같은 type selector는 아직 지원되지 않다고 하니

class 선택자 등의 경우만 사용해야 한다고...

 

 

사용 예시

/* 파싱 결과: .parent-rule .child-rule */
.parent-rule {
  /* 부모 규칙 속성 */
  .child-rule {
    /* 자식 규칙 속성 */
  }
}



/* 파싱 결과: .parent-rule *:hover */
.parent-rule {
  /* 부모 규칙 속성 */
  :hover {
    /* 자식 규칙 속성 */
  }
}


/* 파싱 결과: .parent-rule:hover */
.parent-rule {
  /* 부모 규칙 속성 */
  &:hover {    
    /* 자식 규칙 속성 */
  }
}



/* 뒤에서 추가 가능 */
.card {
  /* .card 스타일 */
  .featured & {
    /* .featured .card 스타일 */
  }
}



/* 중첩 선택자는 여러 번 추가 가능 */
.card {
  /* .card 스타일 */
  .featured & & & {
    /* .featured .card .card .card 스타일 */
  }
}

 

 

 

 

https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector

& nesting selector - CSS: Cascading Style Sheets | MDN