& nesting selector

Baseline 2023
Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

CSS & 중첩 선택자CSS 중첩을 사용할 때 부모와 자식 규칙 사이의 관계를 명시적으로 나타냅니다. 이는 중첩된 자식 규칙 선택자가 부모 요소를 기준으로 갖도록 합니다. & 중첩 선택자가 없다면 자식 규칙 선택자는 자식 요소를 선택하게 됩니다. 이 자식 규칙 선택자는 :is() 내부에 존재하는 것과 동일한 특이성 가중치를 가집니다.

참고 : 자식 규칙은 자식 요소 선택자를 의미하지 않습니다. 자식 규칙은 & 중첩 선택자 사용 여부에 따라 부모 요소 혹은 자식 요소를 대상으로 할 수 있습니다.

중첩 스타일 규칙을 사용하지 않는 경우, & 중첩 선택자는 범위 루트를 나타냅니다.

구문

css
parentRule {
  /* 부모 규칙 스타일 속성 */
  & childRule {
    /* 자식 규칙 스타일 속성 */
  }
}

& 중첩 선택자와 공백

다음 코드는 & 중첩 선택자를 사용하지 않고 중첩이 이루어진 경우를 나타냅니다.

css
.parent-rule {
  /* 부모 규칙 속성 */
  .child-rule {
    /* 자식 규칙 속성 */
  }
}

브라우저가 중첩 선택자를 파싱할 때 이는 자동적으로 선택자 사이에 공백을 추가하여 새로운 CSS 선택자 규칙을 생성합니다. 다음 코드는 중첩이 아닌 규칙과 상응합니다.

css
.parent-rule {
  /* 부모 규칙 스타일 속성 */
}

.parent-rule .child-rule {
  /* .parent-rule 조상 요소에 대한 .child-rule 자손 요소의 스타일 속성 */
}

중첩 규칙이 pseudo-class 를 사용할 때나 컴파운드 선택자를 생성할 때처럼 공백 없이 부모 규칙에 붙여지길 원한다면, 이를 위해 & 중첩 선택자는 반드시 즉시 앞에 붙여야 합니다.

항상 적용할 스타일을 제공하고, 또한 일부 스타일을 호버 시에만 적용되도록 중첩하는 예시를 생각해 봅시다. & 중첩 선택자를 포함하지 않으면 공백이 추가되고 부모 규칙 선택자의 호버된 모든 자손에 중첩된 스타일이 적용되는 규칙 집합이 만들어집니다. 그러나 이것은 의도하는 것이 아닙니다.

css
.parent-rule {
  /* 부모 규칙 속성 */
  :hover {
    /* 자식 규칙 속성 */
  }
}

/* 브라우저는 위 중첩된 규칙을 다음과 같이 파싱합니다. */
.parent-rule {
  /* 부모 규칙 속성 */
}

.parent-rule *:hover {
  /* 자식 규칙 속성 */
}

공백이 없는 & 중첩 선택자를 사용하게 된다면 부모 규칙에 의해 일치하는 요소가 호버 시에 스타일이 적용됩니다.

css
.parent-rule {
  /* 부모 규칙 속성 */
  &:hover {
    /* 자식 규칙 속성 */
  }
}

/* 브라우저는 위 중첩된 규칙을 다음과 같이 파싱합니다. */
.parent-rule {
  /* 부모 규칙 속성 */
}

.parent-rule:hover {
  /* 자식 규칙 속성 */
}

& 중첩 선택자 추가하기

& 중첩 선택자는 규칙의 맥락과는 반대로 추가될 수도 있습니다.

css
.card {
  /* .card 스타일 */
  .featured & {
    /* .featured .card 스타일 */
  }
}

/* 브라우저는 위 중첩 규칙을 다음과 같이 파싱합니다. */

.card {
  /* .card 스타일 */
}

.featured .card {
  /* .featured .card 스타일 */
}

& 중첩 선택자는 여러 번 추가될 수도 있습니다.

css
.card {
  /* .card 스타일 */
  .featured & & & {
    /* .featured .card .card .card 스타일 */
  }
}

/* 브라우저는 위 중첩 규칙을 다음과 같이 파싱합니다. */

.card {
  /* .card 스타일 */
}

.featured .card .card .card {
  /* .featured .card .card .card 스타일 */
}

예제

아래 두 예제는 모두 같은 출력값을 나타냅니다. 첫번째 예제는 일반 CSS 스타일을 사용하고 두번째 예제는 & 중첩 선택자를 사용합니다.

일반 CSS 스타일 사용하기

이 예제는 일반 CSS 스타일을 사용합니다.

HTML

html
<p class="example">
  이 문단은 <a href="#">링크</a>를 포함합니다. 호버하거나 포커스를 맞춰보세요.
</p>

CSS

css
.example {
  font-family: system-ui;
  font-size: 1.2rem;
}

.example > a {
  color: tomato;
}

.example > a:hover,
.example > a:focus {
  color: ivory;
  background-color: tomato;
}

결과

& 으로 중첩된 CSS 스타일 사용하기

이 예제는 중첩 CSS 스타일을 사용합니다.

HTML

html
<p class="example">
  이 문단은 <a href="#">링크</a>를 포함합니다. 호버하거나 포커스를 맞춰보세요.
</p>

CSS

css
.example {
  font-family: system-ui;
  font-size: 1.2rem;
  & > a {
    color: tomato;
    &:hover,
    &:focus {
      color: ivory;
      background-color: tomato;
    }
  }
}

결과

중첩 규칙 밖에서 & 사용하기

& 중첩 선택자가 중첩된 스타일 규칙 안에서 사용되지 않을 경우 이는 범위 루트를 나타내게 됩니다.

html
<p>결과 박스에 호버하여 문서의 배경 색상을 변경해 보세요.</p>
css
& {
  color: blue;
  font-weight: bold;
}

&:hover {
  background-color: wheat;
}

결과

이 경우, 모든 스타일은 문서에 적용됩니다.

명세서

Specification
CSS Nesting Module
# nest-selector

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Nesting selector (&)

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Has more compatibility info.

같이 보기