CSS 중첩 모듈

table.colortable td {
  text-align:center;
}
table.colortable td.c {
  text-transform:uppercase;
}
table.colortable td:first-child, table.colortable td:first-child+td {
  border:1px solid black;
}
table.colortable th {
  text-align:center;
  background:black;
  color:white;
}

table.colortable {
  & td {
    text-align:center;
    &.c { text-transform:uppercase }
    &:first-child, &:first-child + td { border:1px solid black }
  }
  & th {
    text-align:center;
    background:black;
    color:white;
  }
}

.foo {
  color: red;

  .bar {
    color: blue;
  }
}

유효하며, 다음과 동일합니다:

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

중첩 규칙은 중첩 선택자를 사용하여 부모 규칙의 매칭된 요소를 직접 참조하거나, 상대 선택자 문법을 사용하여 "자손" 이외의 관계를 지정할 수 있습니다.

.foo {
  color: red;

  &:hover {
    color: blue;
  }
}

/* 다음과 동일합니다: */

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

.foo {
  color: red;

  + .bar {
    color: blue;
  }
}

/* 다음과 동일합니다: */

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

div {
  color: red;

  input {
    margin: 1em;
  }
}
/* "input"이 식별자이기 때문에 유효하지 않습니다. */

이러한 선택자도 작성할 수 있지만, 약간 다르게 표현해야 합니다:

div {
  color: red;

  & input { margin: 1em; }
  /* 유효, 더 이상 식별자로 시작하지 않음 */

  :is(input) { margin: 1em; }
  /* 유효, 콜론으로 시작하며
     이전 규칙과 동일합니다. */
}

/* & 단독 사용 가능 */
.foo {
  color: blue;
  & > .bar { color: red; }
  > .baz { color: green; }
}
/* .foo { color: blue; }
  .foo > .bar { color: red; }
  .foo > .baz { color: green; }
*/


/* 합성 선택자 내에서 부모 선택자를 세분화함 */
.foo {
  color: blue;
  &.bar { color: red; }
}
/* .foo { color: blue; }
  .foo.bar { color: red; }
*/

/* 리스트의 여러 선택자는 모두 부모 기준 */
.foo, .bar {
  color: blue;
  + .baz, &.qux { color: red; }
}
/* .foo, .bar { color: blue; }
  :is(.foo, .bar) + .baz,
  :is(.foo, .bar).qux { color: red; }
*/

/* 한 선택자 내에서 & 여러 번 사용 가능 */
.foo {
  color: blue;
  & .bar & .baz & .qux { color: red; }
}
/* .foo { color: blue; }
  .foo .bar .foo .baz .foo .qux { color: red; }
*/

/* &는 선택자 앞에 있을 필요 없음 */

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

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

/* 상대 선택자를 사용하면, 초기에 &가 자동으로 암시됨 */

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

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

/* 다소 특이하지만 & 단독 사용도 가능 */
.foo {
  color: blue;
  & { padding: 2ch; }
}
/* .foo { color: blue; }
  .foo { padding: 2ch; }
  // 또는
  .foo {
    color: blue;
    padding: 2ch;
  }
*/

/* 역시 특이하지만, &를 반복할 수도 있음 */
.foo {
  color: blue;
  && { padding: 2ch; }
}
/* .foo { color: blue; }
  .foo.foo { padding: 2ch; }
*/

/* 부모 선택자는 임의로 복잡할 수 있음 */
.error, #404 {
  &:hover > .baz { color: red; }
}
/* :is(.error, #404):hover > .baz { color: red; }
*/

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

/* 중첩 선택자도 복잡할 수 있음 */
.foo {
  & :is(.bar, &.baz) { color: red; }
}
/* .foo :is(.bar, .foo.baz) { color: red; }
*/

/* 여러 단계의 중첩은 선택자를 "쌓아올림" */
figure {
  margin: 0;

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

    > p {
      font-size: .9rem;
    }
  }
}
/* figure { margin: 0; }
  figure > figcaption { background: hsl(0 0% 0% / 50%); }
  figure > figcaption > p { font-size: .9rem; }
*/
		
/* Cascade Layers 예시 */
@layer base {
  html {
    block-size: 100%;

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

/* Cascade Layers 중첩 예시 */
@layer base {
  html {
    block-size: 100%;

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

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

/* Scoping 중첩 예시 */
.card {
  inline-size: 40ch;
  aspect-ratio: 3/4;

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

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

다음과 같은 경우는 유효하지 않습니다:

/* 선택자가 식별자로 시작 */
.foo {
  color: blue;
  div {
    color: red;
  }
}

/* 속성을 직접 사용할 수 있음 */
.foo {
  display: grid;

  @media (orientation: landscape) {
    grid-auto-flow: column;
  }
}
/* 동일하게 해석됨
  .foo {
    display: grid;
				@media (orientation: landscape) {
      & {
        grid-auto-flow: column;
      }
    }
  }
*/

/* 최종적으로 해석됨
  .foo { display: grid; }

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

/* 조건부는 추가로 중첩 가능 */
.foo {
  display: grid;

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

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

/* 동일하게 해석됨
  .foo { display: grid; }

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

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

/* Cascade Layers 중첩 예시 */
html {
  @layer base {
    block-size: 100%;

    @layer support {
      & body {
        min-block-size: 100%;
      }
    }
  }
}
/* 동일하게 해석됨
  @layer base {
    html { block-size: 100%; }
  }
  @layer base.support {
    html body { min-block-size: 100%; }
  }
*/

/* Scoping 중첩 예시 */
.card {
  inline-size: 40ch;
  aspect-ratio: 3/4;

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

/* 동일하게 해석됨
  .card { inline-size: 40ch; aspect-ratio: 3/4; }
  @scope (.card) {
    :scope { border-block-end: 1px solid white; }
  }
*/

예를 들어, 앞선 예시:

.foo {
  display: grid;

  @media (orientation: landscape) {
    grid-auto-flow: column;
  }
}
/* 동일하게 해석됨
  .foo {
    display: grid;

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

은 실제로 정확히 동일하며, 동일한 CSSOM 구조를 생성합니다. CSSMediaRule 객체는 CSSStyleRule 객체를 .childRules 속성에 하나만 가지며, grid-auto-flow 속성을 포함합니다.

.parent {
  color: blue;

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

다음과 동일합니다:

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

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

/* 동일하게 해석됨 */
article {
  color: green;
  color: red;
  & { color: blue; }
}

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

  &:hover { color: blue; }
}

&는 .foo에 매칭된 요소만 나타내며, 즉 다음과 동일합니다:

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

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

그리고 DOM 구조가 다음과 같을 때:

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

텍스트는 파란색이 됩니다. &의 specificity는 #a ([1,0,0])와 b ([0,0,1]) 중 더 큰 [1,0,0]이므로, 전체 & c 선택자는 [1,0,1] specificity를 가지며, .foo c ([0,1,1])보다 큽니다.

특히, 이는 중첩을 수동으로 비중첩 규칙으로 확장했을 때와 다른 결과입니다. 이 경우 color: blue 선언은 b c 선택자([0,0,2])로 매칭되기 때문입니다, #a c([1,0,1])가 아니라.

div&로 써도 같은 의미지만, 중첩 스타일 규칙의 시작에 사용할 수 없고, 선택자의 다른 위치에서는 가능할 수 있습니다.