CSS 내장 선택자 (&)

정의와 사용법

CSS 내장 (&) 선택자는 다른 요소의 문맥에서 요소에 스타일을 적용하는 데 사용됩니다.

내장은 관련 요소에 대한 선택자를 반복적으로 선택할 필요를 줄입니다.

예제

예제 1

내장 전에, 각 선택자를 명시적으로 별도로 선언해야 합니다. 예를 들어:

.box {
  border: 2px solid green;
  background-color: beige;
  font-family: monospace;
  font-size: 20px;
}
.box > a {
  color: green;
}
.box > a:hover {
  color: white;
  background-color: salmon;
}

직접 시도해 보세요

예제 2

내장 후, 선택자는 연장되고, 관련 스타일 규칙은 부모 규칙에 그룹화됩니다：

.box {
  border: 2px solid green;
  background-color: beige;
  font-family: monospace;
  font-size: 20px;
  & > a {
    color: green;
    &:hover {
      color: white;
      background-color: salmon;
    }
  }
}

직접 시도해 보세요

추천:예제에서 .box 스타일을 프로젝트에서 제거하려면, 관련 선택자를 검색하지 않고 전체 그룹을 제거할 수 있습니다.

CSS 문법

부모 규칙 {
  css 선언;
  & 자식 규칙 {
    css 선언;  } 
}

기술 세부 사항

브라우저 지원