CSS 중첩 모듈 레벨 1

1. 소개

이 섹션은 규범적이지 않습니다.

이 모듈은 스타일 규칙을 다른 스타일 규칙 안에 중첩하는 것을 지원하는 내용을 설명하며, 내부 규칙의 선택자가 외부 규칙에 의해 매치된 요소들을 참조할 수 있게 합니다. 이 기능은 관련된 스타일들을 CSS 문서 내의 단일 구조로 집계할 수 있게 하여, 가독성과 유지보수성을 향상시킵니다.

1.1. 모듈 상호작용

이 모듈은 [CSS21] 파서 모델을 확장하는 새로운 파서 규칙을 도입합니다. 또한 [SELECTORS-4] 모듈을 확장하는 선택자들을 도입합니다. 일부 IDL 및 알고리듬은 [CSSOM-1] 모듈에서 정의된 것들을 확장하거나 수정합니다.

1.2. 값

이 명세는 새로운 속성이나 값을 정의하지 않습니다.

2. 해설

이 섹션은 규범적이지 않습니다.

좀 더 간결하게 작성하고 싶은 CSS가 있다고 상상해 보세요.

.foo {
  color: green;
}
.foo .bar {
  font-size: 1.4rem;
}

중첩(Nesting)을 사용하면, 다음과 같이 작성할 수 있습니다:

.foo {
  color: green;
  .bar {
    font-size: 1.4rem;
  }
}

Sass나 다른 CSS 전처리기에서 스타일을 중첩해 본 적이 있다. 매우 익숙하게 느껴질 것입니다.

부모 스타일 규칙 안에 어떤 규칙이든 중첩할 수 있습니다:

main {
  div { ... }
  .bar { ... }
  #baz { ...}
  :has(p) { ... }
  ::backdrop { ... }
  [lang|="zh"] { ... }
  * { ... }
}

기본적으로 자식 규칙의 선택자는 부모 규칙과 후손 결합자(descendant combinator)로 연결되는 것으로 가정되지만, 중첩된 선택자를 임의의 결합자(combinator)로 시작하여 이를 변경할 수 있습니다:

main {
  + article { ... }
  > p { ... }
  ~ main { ... }
}

새로운 & 선택자는 부모 선택자에 의해 매치된 요소들을 명시적으로 참조할 수 있게 해주므로, 이전 예제들은 다음과 같이 작성될 수 있습니다:

main {
  & + article { ... }
  & > p { ... }
  & ~ main { ... }
}

그러나 중첩된 선택자 내에서 &를 다른 위치에 배치하여 부모와 자식 규칙 간의 다른 유형의 관계를 나타낼 수 있습니다. 예를 들어, 이 CSS:

ul {
  padding-left: 1em;
}
.component ul {
  padding-left: 0;
}

중첩을 사용하면 다음과 같이 다시 쓸 수 있습니다:

ul {
  padding-left: 1em;
  .component & {
    padding-left: 0;
  }
}

다시 말해, & 는 “중첩 선택자를 여기에 넣고 싶다”는 것을 표시하는 방법을 제공합니다.

선택자 사이에 공백을 원하지 않을 때도 유용합니다. 예를 들어:

a {
  color: blue;
  &:hover {
    color: lightblue;
  }
}

이 코드는 a:hover {와 동일한 결과를 냅니다. &가 없다면 a :hover {가 되어—a와 :hover 사이의 공백에 유의하세요—호버 링크에 스타일이 적용되지 않습니다.

여러 수준으로 중첩할 수 있습니다—이미 중첩된 CSS 안에 또 중첩된 CSS를 넣는 식으로—원하는 만큼 계층을 쌓을 수 있습니다. 중첩은 Container Queries, Supports Queries, Media Queries 및/또는 Cascade Layers와 자유롭게 혼합할 수 있습니다. (거의) 모든 것이 모든 것 안에 들어갈 수 있습니다.

3. 스타일 규칙 중첩

스타일 규칙은 다른 스타일 규칙 안에 중첩될 수 있습니다. 이러한 중첩 스타일 규칙은 일반 스타일 규칙과 정확히 동일하게 동작하여 선택자를 통해 요소에 속성을 연관시키지만, 부모 규칙의 선택자 컨텍스트를 "상속"하여, 부모의 선택자를 반복하지 않고도, 여러 번에 걸쳐 부모의 선택자를 확장할 수 있습니다.

중첩 스타일 규칙은 일반 스타일 규칙과 정확히 같지만, 상대 선택자(relative selectors)를 사용할 수 있다는 점이 다릅니다. 상대 선택자는 암묵적으로 부모 규칙에 의해 매치된 요소들을 기준으로 합니다.

.foo {
  color: red;

  a {
    color: blue;
  }
}

.foo {
  color: red;
}
.foo a {
  color: blue;
}

.foo {
  color: red;

  &:hover {
    color: blue;
  }
}

/* equivalent to: */

.foo { color: red; }
.foo:hover { color: blue; }

.foo {
  color: red;

  + .bar {
    color: blue;
  }
}

/* equivalent to: */

.foo { color: red; }
.foo + .bar { color: blue; }

3.1. 구문

이제 스타일 규칙의 내용은 기존의 선언들 외에도 중첩 스타일 규칙 및 at-rule을 허용합니다.

중첩 스타일 규칙 은 비중첩 규칙과 다음과 같은 점에서 다릅니다:

• 하나의 중첩 스타일 규칙은 서두(prelude)로 <relative-selector-list>를 허용합니다 (단순히 <selector-list>가 아니라). 모든 상대 선택자는 nesting selector가 나타내는 요소들을 기준으로 합니다.

• 만약 <relative-selector-list>의 선택자가 결합자(combinator)로 시작하지 않지만 nesting selector를 포함한다면, 그것은 비-상대 선택자로 해석됩니다.

중첩 스타일 규칙이 어떻게 파싱되는지에 대한 정확한 세부 사항은 [CSS-SYNTAX-3]에 정의되어 있습니다.

잘못된 중첩 스타일 규칙은 그 내용과 함께 무시되며, 부모 규칙을 무효화하지는 않습니다.

상대 선택자를 포함한 중첩 규칙은 암묵적인 nesting selector의 특이성(specificity)을 포함합니다. 예를 들어, .foo { > .bar {...}}와 .foo { & > .bar {...}}는 내부 규칙에 대해 동일한 특이성을 가집니다.

.foo {
  color: blue;
  &Bar { color: red; }
}
/* In Sass, this is equivalent to
  .foo { color: blue; }
  .fooBar { color: red; }
*/

만약 <forgiving-selector-list>의 항목이 nesting selector를 포함하지만 유효하지 않다면, 그 항목은 버려지지 않고 정확히 그대로 보존됩니다. (이것은 선택자의 매칭 동작을 변경하지는 않습니다—유효하지 않은 선택자는 여전히 아무것도 매치하지 않습니다—단지 선택자의 직렬화에만 영향을 줍니다.)

앞의 단락은 & 자체를 Selectors로 이동시킬 때 Selectors로 옮겨져야 합니다; 여기서는 편의상 임시로 수정해 두었습니다.

3.2. 예제

/* & can be used on its own */
.foo {
  color: blue;
  & > .bar { color: red; }
  > .baz { color: green; }
}
/* equivalent to
  .foo { color: blue; }
  .foo > .bar { color: red; }
  .foo > .baz { color: green; }
*/


/* or in a compound selector,
   refining the parent’s selector */
.foo {
  color: blue;
  &.bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.bar { color: red; }
*/

/* multiple selectors in the list are all
   relative to the parent */
.foo, .bar {
  color: blue;
  + .baz, &.qux { color: red; }
}
/* equivalent to
  .foo, .bar { color: blue; }
  :is(.foo, .bar) + .baz,
  :is(.foo, .bar).qux { color: red; }
*/

/* & can be used multiple times in a single selector */
.foo {
  color: blue;
  & .bar & .baz & .qux { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo .bar .foo .baz .foo .qux { color: red; }
*/

/* & doesn’t have to be at the beginning of the selector */

.foo {
  color: red;
  .parent & {
    color: blue;
  }
}
/* equivalent to
  .foo { color: red; }
  .parent .foo { color: blue; }
*/

.foo {
  color: red;
  :not(&) {
    color: blue;
  }
}
/* equivalent to
  .foo { color: red; }
  :not(.foo) { color: blue; }
*/

/* But if you use a relative selector,
  an initial & is implied automatically */

.foo {
  color: red;
  + .bar + & { color: blue; }
}

/* equivalent to
  .foo { color: red; }
  .foo + .bar + .foo { color: blue; }
*/

/* Somewhat silly, but & can be used all on its own, as well. */
.foo {
  color: blue;
  & { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo { padding: 2ch; }

  // or

  .foo {
    color: blue;
    padding: 2ch;
  }
*/

/* Again, silly, but can even be doubled up. */
.foo {
  color: blue;
  && { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.foo { padding: 2ch; }
*/

/* The parent selector can be arbitrarily complicated */
.error, #404 {
  &:hover > .baz { color: red; }
}
/* equivalent to
  :is(.error, #404):hover > .baz { color: red; }
*/

.ancestor .el {
  .other-ancestor & { color: red; }
}
/* equivalent to
  .other-ancestor :is(.ancestor .el) { color: red; }

/* As can the nested selector */
.foo {
  & :is(.bar, &.baz) { color: red; }
}
/* equivalent to
  .foo :is(.bar, .foo.baz) { color: red; }
*/

/* Multiple levels of nesting "stack up" the selectors */
figure {
  margin: 0;

  > figcaption {
    background: hsl(0 0% 0% / 50%);

    > p {
      font-size: .9rem;
    }
  }
}
/* equivalent to
  figure { margin: 0; }
  figure > figcaption { background: hsl(0 0% 0% / 50%); }
  figure > figcaption > p { font-size: .9rem; }
*/

/* Example usage with Cascade Layers */
@layer base {
  html {
    block-size: 100%;

    body {
      min-block-size: 100%;
    }
  }
}
/* equivalent to
  @layer base {
    html { block-size: 100%; }
    html body { min-block-size: 100%; }
  }
*/

/* Example nesting Cascade Layers */
@layer base {
  html {
    block-size: 100%;

    @layer support {
      body {
        min-block-size: 100%;
      }
    }
  }
}
/* equivalent to
  @layer base {
    html { block-size: 100%; }
  }
  @layer base.support {
    html body { min-block-size: 100%; }
  }
*/

/* Example usage with Scoping */
@scope (.card) to (> header) {
  :scope {
    inline-size: 40ch;
    aspect-ratio: 3/4;

    > header {
      border-block-end: 1px solid white;
    }
  }
}
/* equivalent to
  @scope (.card) to (> header) {
    :scope { inline-size: 40ch; aspect-ratio: 3/4; }
    :scope > header { border-block-end: 1px solid white; }
  }
*/

/* Example nesting Scoping */
.card {
  inline-size: 40ch;
  aspect-ratio: 3/4;

  @scope (&) to (> header > *) {
    :scope > header {
      border-block-end: 1px solid white;
    }
  }
}

/* equivalent to
  .card { inline-size: 40ch; aspect-ratio: 3/4; }
  @scope (.card) to (> header > *) {
    :scope > header { border-block-end: 1px solid white; }
  }
*/

3.3. 다른 At-규칙의 중첩

이 명세는 중첩 스타일 규칙 외에도, 스타일 규칙 안에 중첩 그룹 규칙을 허용합니다: 본문에 스타일 규칙들을 포함하는 모든 at-규칙은, 달리 명시되지 않는 한, 스타일 규칙 안에 중첩될 수 있습니다.

이와 같이 중첩될 때, 중첩 그룹 규칙 블록의 내용은 <block-contents>로 파싱되며, <rule-list>로 파싱되지 않습니다:

• 스타일 규칙들은 중첩 스타일 규칙이며, 그들의 nesting selector는 가장 가까운 조상 스타일 규칙으로부터 정의를 가져옵니다.

• 속성들은 직접 사용할 수 있으며, 이는 마치 중첩 선언 규칙 안에 중첩된 것처럼 동작합니다.

이러한 중첩 그룹 규칙의 의미와 동작은, 달리 명시되지 않는 한, 다른 점이 없습니다.

/* Properties can be directly used */
.foo {
  display: grid;

  @media (orientation: landscape) {
    grid-auto-flow: column;
  }
}

/* equivalent to: */
.foo {
  display: grid;
}
@media (orientation: landscape) {
  .foo {
    grid-auto-flow: column
  }
}

/* and also equivalent to the unnested: */
.foo { display: grid; }

@media (orientation: landscape) {
  .foo {
    grid-auto-flow: column;
  }
}

/* Conditionals can be further nested */
.foo {
  display: grid;

  @media (orientation: landscape) {
    grid-auto-flow: column;

    @media (min-width > 1024px) {
      max-inline-size: 1024px;
    }
  }
}

/* equivalent to */
.foo { display: grid; }

@media (orientation: landscape) {
  .foo {
    grid-auto-flow: column;
  }
}

@media (orientation: landscape) and (min-width > 1024px) {
  .foo {
    max-inline-size: 1024px;
  }
}

/* Example nesting Cascade Layers */
html {
  @layer base {
    block-size: 100%;

    @layer support {
      & body {
        min-block-size: 100%;
      }
    }
  }
}

/* equivalent to */
@layer base {
  html { block-size: 100%; }
}
@layer base.support {
  html body { min-block-size: 100%; }
}

/* Example nesting Scoping */
.card {
  inline-size: 40ch;
  aspect-ratio: 3/4;

  @scope (&) {
    :scope {
      border: 1px solid white;
    }
  }
}

/* equivalent to */
.card { inline-size: 40ch; aspect-ratio: 3/4; }
@scope (.card) {
  :scope { border-block-end: 1px solid white; }
}

연속적으로 직접 중첩된 속성들의 연속은 자동으로 중첩 선언 규칙으로 래핑됩니다. (이것은 CSSOM에서 관찰할 수 있습니다.)

3.3.1. 중첩된 @scope 규칙

@scope 규칙이 중첩 그룹 규칙일 때, <scope-start> 선택자 안의 &는 가장 가까운 조상 스타일 규칙에 의해 매치된 요소들을 가리킵니다.

.parent {
  color: blue;

  @scope (& > .scope) to (& .limit) {
    & .content {
      color: red;
    }
  }
}

.parent { color: blue; }
@scope (.parent > .scope) to (:where(:scope) .limit) {
  :where(:scope) .content {
    color: red;
  }
}

3.4. 중첩 규칙과 선언의 혼합

하나의 스타일 규칙이 선언들 및 중첩 스타일 규칙 또는 중첩 그룹 규칙을 동시에 포함할 때, 이 세 가지는 임의로 혼합될 수 있습니다. 규칙들 이후나 그 사이에 오는 선언들은 암묵적으로 중첩 선언 규칙으로 래핑되어, 다른 규칙들에 대한 순서를 보존합니다.

article {
  color: green;
  & { color: blue; }
  color: red;
}

/* equivalent to */
article { color: green; }
:is(article) { color: blue; }
article { color: red; }

/* NOT equivalent to */
article { color: green; }
article { color: red; }
:is(article) { color: blue; }

출현 순서 결정을 위해, 중첩 스타일 규칙과 중첩 그룹 규칙은 부모 규칙보다 나중에 오는 것으로 간주됩니다.

article {
  color: blue;
  & { color: red; }
}

article {
  color: blue;
  :where(&) { color: red; }
}

참고: 선언과 중첩 규칙을 자유롭게 섞을 수는 있지만, 이후의 속성들이 소스 텍스트에 나타나지 않는 중첩 선언 규칙으로 자동 래핑되기 때문에, 읽기 어렵고 다소 혼란스러울 수 있습니다. 가독성을 위해, 작성자들은 중첩 규칙보다 먼저 스타일 규칙 내의 모든 속성을 먼저 배치하는 것이 권장됩니다. (이것은 또한 구형 사용자 에이전트에서 다소 더 잘 동작하는 경향이 있습니다: 파싱과 오류 복구 방식의 특성상, 중첩 규칙 후에 나타나는 속성들이 건너뛰어질 수 있습니다.)

4. 중첩 선택자: & 선택자

중첩 스타일 규칙을 사용할 때, 작성자는 부모 규칙에 의해 매치된 요소들을 참조할 수 있어야 합니다; 결국 이것이 중첩의 전부입니다. 이를 위해 이 명세는 새로운 선택자인 중첩 선택자를 정의하며, & (U+0026 AMPERSAND)로 표기합니다.

중첩 스타일 규칙의 선택자에서 사용될 때, 중첩 선택자는 부모 규칙에 의해 매치된 요소들을 나타냅니다. 다른 어떤 문맥에서 사용될 때에는, 해당 문맥에서의 :scope과 동일한 요소들을 나타냅니다 (달리 정의되지 않는 한).

a, b {
  & c {

:is(a, b) c {
  color: blue;
}

중첩 선택자는 의사요소(pseudo-elements)를 나타낼 수 없습니다 (:is() 의사클래스의 동작과 동일합니다).

.foo, .foo::before, .foo::after {
  color: red;
}

.foo, .foo::before, .foo::after {
  color: red;
}
.foo:hover {
  color: blue;
}

이 제한을 완화하고 싶지만, :is()와 &가 같은 기반 메커니즘을 사용하도록 동시에 처리해야 합니다. (이슈: Issue 7433)

특이성(specificity)은 부모 스타일 규칙의 선택자 목록에 있는 복합 선택자들 중 가장 큰 특이성과 동일합니다 (:is()의 동작과 동일), 또는 그런 선택자 목록이 없으면 0입니다.

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

<b class=foo>
  <c>Blue text</c>
</b>

.a1, .a2, .a3 {
  .b1, .b2, .b3 {
    .c1, .c2, .c3 {
      ...;
    }
  }
}

중첩 선택자는 부모 규칙에 의해 매치된 경우, 피처리스(featureless) 요소들도 매치할 수 있습니다.

중첩 선택자가 복합 선택자 내에서 위치하는 것은 동작에 차이를 만들지 않습니다 (즉, &.foo와 .foo&는 동일한 요소를 매치합니다), 다만 기존 규칙인 타입 선택자가 존재한다면 복합 선택자에서 반드시 맨 앞에 위치해야 한다는 규칙은 계속 적용됩니다 (즉, &div는 불법이며 대신 div&로 작성해야 합니다).

5. 중첩 선언 규칙

약간 기술적인 이유로, 스타일 규칙의 내용 시작 부분에 나타나는 속성들과 다른 규칙들과 뒤섞여 나타나는 속성들을 구별할 수 있어야 합니다.

.foo {
  color: red;
  @media (...) {...}
  background: blue;
}

이를 위해, CSS 파서는 이러한 속성들을 자동으로 특수한 자식 규칙으로 래핑합니다. 그러나 만약 이들을 스타일 규칙으로 & 선택자를 사용해 래핑한다면, 다소 불운한 동작이 발생할 수 있습니다:

.foo, .foo::before {
  color: red;
  & {
    background: blue;
  }
}

마찬가지로, 중첩된 비-스타일 규칙의 자식 선언들은 어떤 식으로든 규칙들로 노출되어야 합니다. 이러한 규칙들(예: @media)은 원래 style 속성이 없었기 때문에 이러한 문제가 발생합니다.

이 모든 문제를 해결하기 위해, 대신 연속적으로 직접 중첩된 속성들을 중첩 선언 규칙(nested declarations rule)로 감쌉니다.

달리 명시되지 않는 한, 중첩 선언 규칙은 중첩 스타일 규칙이며, 다른 스타일 규칙과 동일하게 동작합니다. 그것은 부모 스타일 규칙과 정확히 동일한 요소들과 의사요소들을 매치하며, 동일한 특이성 동작을 가집니다. (이는 & 선택자를 가진 스타일 규칙과 유사하지만, 위에서 설명한 것처럼 약간 더 강력합니다.)

.foo, .foo::before, .foo::after {
  color: black;
  @media (prefers-color-scheme: dark) {
    & {
      color: white;
    }
  }
}

.foo, .foo::before, .foo::after {
  color: black;
  @media (prefers-color-scheme: dark) {
    color: white;
  }
}

.foo {
  color: black;
  @media (...) {...}
  background: silver;
}

6. CSSOM

참고: [CSSOM-1] 은 이제 CSSStyleRule 이 자식 규칙을 가질 수 있다고 정의합니다.

중첩 스타일 규칙(relative selector)에서 상대 선택자를 직렬화할 때, 선택자는 절대화되어야 하며, 암묵적인 중첩 선택자가 삽입되어야 합니다.

6.1. The CSSNestedDeclarations Interface

The CSSNestedDeclarations 인터페이스는 중첩 선언 규칙을 나타냅니다.

[Exposed=Window]
interface CSSNestedDeclarations : CSSRule {
  [SameObject, PutForwards=cssText] readonly attribute CSSStyleProperties style;
};

The CSSNestedDeclarations 규칙은 그 선언 블록이 직접 직렬화된 것처럼 직렬화됩니다.

참고: 이는 예를 들어 insertRule 등을 사용하여 생성할 수 있는 여러 인접한 중첩 선언 규칙이 직렬화되고 다시 파싱될 때 하나의 규칙으로 병합된다는 것을 의미합니다.

개인정보 고려사항

이 명세에 대해 보고된 새로운 개인정보 관련 고려사항은 없습니다.

보안 고려사항

이 명세에 대해 보고된 새로운 보안 관련 고려사항은 없습니다.

7. 변경사항

2023-02-14 부 Working Draft 이후의 주요 변경사항:

• <scope-start> 선택자가 @scope 규칙의 부모 규칙으로 더 이상 동작하지 않습니다. (Issue 9740)

• 중첩 선택자(nesting selector)가 피처리스(featureless) 요소를 매치할 수 있도록 허용된다는 점을 명확히 했습니다.

• &div을 다시 유효하지 않도록 변경했습니다; 이제 Syntax가 "무한 선독"을 지원하기 때문에 이를 허용할 필요가 없습니다. 또한 이렇게 하면 전처리기와의 충돌을 피할 수 있습니다. (Issue 8662)

• CSSOM이 이제 CSSStyleRule이 CSSGroupingRule의 하위클래스임을 정의하므로, cssRules 속성과 관련 기계장치의 수동 정의를 제거했습니다. (Issue 8940)

• 암묵적인 중첩 선택자가 특이성에 미치는 영향을 명확히 했습니다. (Issue 9069)

• 규칙과 뒤섞인 선언들(또는 중첩 그룹 규칙의 모든 선언)은 이제 자동으로 @nest 규칙으로 래핑됩니다. (Issue 8738)

• @nest를 중첩 선언 규칙으로 대체했습니다. (Issue 10234)

• 웹 플랫폼 테스트(Web Platform Tests) 커버리지를 추가했습니다.