CSS Nesting Module

1. 序論

この~moduleは、別の`~style規則$の中に~style規則を入子にするための~supportを述べる — それは、内縁~規則の選択子が，外縁~規則に合致した要素を参照できるようにする。 この特能は、関係し合う~styleたちを~CSS文書の中の単独の構造に集約できるようにして，可読性と保守能を改善する。 ◎ This module describes support for nesting a style rule within another style rule, allowing the inner rule’s selector to reference the elements matched by the outer rule. This feature allows related styles to be aggregated into a single structure within the CSS document, improving readability and maintainability.

【この訳に特有な表記規約】

2. 説明書き

もっと~~簡潔な仕方で書きたい~CSSがあったとする： ◎ Imagine you have some CSS that you’d like to write in a more compact way.

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

そのような~codeは、 入子法により次のように書ける： ◎ With Nesting, you can write such code as:

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

`Sass＠https://sass-lang.com/$ その他の~CSS前処理器において ~styleを入子にしていた作者は、 これが，ごく馴染みであることを見出すことになろう。 ◎ If you’ve been nesting styles in Sass or other CSS preprocessors, you will find this very familiar.

どの規則も，親~style規則の内側に入子にできる： ◎ You can nest any rules inside of a parent style rule:

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

既定では、 子~規則の選択子は， `子孫~結合子$を挟んで親~規則と接続するものと見做されるが、 入子な選択子は，どの結合子からでも開始するよう変更できる： ◎ By default, the child rule’s selector is assumed to connect to the parent rule by a descendant combinator, but you can start the nested selector with any combinator to change that:

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

新たな選択子 `&$css は、 親~選択子に合致した要素を明示的に参照rできるようにする。 なので、 直前の例は，次のように書くこともできた： ◎ The new & selector lets you refer to the elements matched by the parent selector explictly, so the previous examples could have been written as:

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

`&$css は、 入子な選択子の中の他の所在に配置することで，親~規則と子~規則の間に他の関係性を指示できる。 例えば、 次の~CSSは： ◎ But you can place the & in other locations within the nested selector, to indicate other types of relationships between the parent and child rule. For example, this CSS:

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

入子ngを利用して，次のように書き直せる： ◎ Can be rewritten using Nesting as:

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

ここでも、 `&$css は， “それが，入子な選択子を置くよう求まれる所” とする仕方を与える。 ◎ Again, the & gives you a way to say “this is where I want the nested selector to go”.

それはまた、 選択子の合間に~space【すなわち、`子孫~結合子$】を挟みたくないときにも，手軽になる。 例えば、 次の~codeは： ◎ It’s also handy when you don’t want a space between your selectors. For example:

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

`a:hover {^css と同じ結果を得る。 `&$css を伴わない場合、 `a :hover {^css （ `a^css と `:hover^css の合間に~spaceがある） と同じ結果になり， ~hover~linkを~styleするのに失敗することになる。 ◎ Such code yields the same result as a:hover {. Without the &, you’d get a :hover {—notice the space between a and :hover—which would fail to style your hover link.

すでに入子にされた~CSSの内側に~CSSを入子にするよう， 欲されるだけ何~層でも深く入子にできる。 入子法は、［ `容器~query＠~CSSCOND5#container-query$／ `~supports~query＠~CSSCOND#supports-queries$／ `媒体~query＠~MQ5#media-query$／ `~cascade層＠~CASCADE#cascade-layers$ ］とも併用できる。 （およそ）何でも他のものの内側に置ける。 ◎ You can nest more than one layer deep—nesting CSS inside already-nested CSS—in as many levels as you desire. You can mix Nesting with Container Queries, Supports Queries, Media Queries, and/or Cascade Layers however you want. (Nearly) anything can go inside of anything.

3. ~style規則の入子法

`~style規則$は、 他の~style規則の内側に入子にできる。 これらの `入子な~style規則@ は、 普通の~style規則と正確に同じ様に動作する — すなわち、 選択子を介して，要素に~prop群を結付ける — が、 それらは親~規則の選択子~文脈を “継承する” ことで，選択子を — 場合によっては複数回~繰返す必要なく — 親の選択子の上に更に築くことを許容する。 ◎ Style rules can be nested inside of other styles rules. These nested style rules act exactly like ordinary style rules—associating properties with elements via selectors—but they "inherit" their parent rule’s selector context, allowing them to further build on the parent’s selector without having to repeat it, possibly multiple times.

`入子な~style規則$は、 `相対~選択子$を利用できることを除けば， 通常の~style規則と正確に同じ様になる — それは、 暗黙的に，親~規則に合致した要素から相対的になる。 ◎ A nested style rule is exactly like a normal style rule, except that it can use relative selectors, which are implicitly relative to the elements matched by the parent rule.

.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; }
*/

.foo {
  color: blue;
  &Bar { color: red; }
}
/* 
は、
Sass においては，次と等価になる：
◎
In Sass, this is equivalent to

  .foo { color: blue; }
  .fooBar { color: red; }
*/

.foo {
  color: blue;
  & > .bar { color: red; }
  > .baz { color: green; }
}

/* 
は、
次と等価になる：
◎
equivalent to

  .foo { color: blue; }
  .foo > .bar { color: red; }
  .foo > .baz { color: green; }
*/

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

/* 
は、
次と等価になる：
◎
equivalent to

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

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

/* 
は、
次と等価になる：
◎
equivalent to

  .foo, .bar { color: blue; }
  :is(.foo, .bar) + .baz,
  :is(.foo, .bar).qux { color: red; }
*/

.foo {
  color: blue;
  & .bar & .baz & .qux { color: red; }
}

/* 
は、
次と等価になる：
◎
equivalent to

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

.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; }
*/

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

/* 
は、
次と等価になる：
◎
equivalent to

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

.foo {
  color: blue;
  & { padding: 2ch; }
}

/* 
は、
次と等価になる：
◎
equivalent to

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

// あるいは次とも
◎
// or

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

.foo {
  color: blue;
  && { padding: 2ch; }
}
/* 
は、
次と等価になる：
◎
equivalent to

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

.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; }
*/

.foo {
  & :is(.bar, &.baz) { color: red; }
}
/* 
は、
次と等価になる：
◎
equivalent to

  .foo :is(.bar, .foo.baz) { color: red; }
*/

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; }
*/

@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%; }
  }
*/

@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%; }
  }
*/

@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; }
  }
*/

.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; }
  }
*/

.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;
  }
}

.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;
  }
}

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%; }
}

.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; }
}

.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;
}
/* 
は、
次と等価になる：
◎
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. 入子ng選択子： `&^css 選択子

`入子な~style規則$を利用するときには、 親~規則に合致した要素を参照r可能にする必要がある【！must】。 それこそが，`入子法の要^em を成す。 これを成遂げるため、 この仕様は， `&@css （ `0026^U `AMPERSAND^cn ）として記される新たな選択子として `入子ng選択子@ （ `nesting selector^en ）を定義する。 ◎ When using a nested style rule, one must be able to refer to the elements matched by the parent rule; that is, after all, the entire point of nesting. To accomplish that, this specification defines a new selector, the nesting selector, written as & (U+0026 AMPERSAND).

`入子ng選択子$は、 `入子な~style規則$の選択子~内で利用されたときは，親~規則に合致した要素を表現する。 他の文脈~内で利用されたときは†、 その文脈において `scope$ps に合致する【！the same】要素を表現する （他が指定されない限り）。 ◎ When used in the selector of a nested style rule, the nesting selector represents the elements matched by the parent rule. When used in any other context, it represents the same elements as :scope in that context (unless otherwise defined).

【† したがって、 ~top-level（入子にされない文脈）でも利用できることになる （通例的には有用にならないであろうが）。 】

a, b {
  & c { color: blue; }
}

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

`入子ng選択子$は、 疑似要素を表現し得ない （ `is()$ps 疑似類の挙動に一致する）。 ◎ The nesting selector cannot represent pseudo-elements (identical to the behavior of the :is() pseudo-class).

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

  &:hover { color: blue; }
}

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

この制約は緩めたいが、［ `is()$ps, `&$css ］両者に対し同時に行う必要がある — それらは、 意図的に，同じ下層の仕組みの上に築かれるので。 （ `7433$issue ） ◎ We’d like to relax this restriction, but need to do so simultaneously for both :is() and &, since they’re intentionally built on the same underlying mechanisms. (Issue 7433)

`入子ng選択子$の`詳細度$は、［ 親~style規則の`選択子~list$を成す各`複階-選択子$の`詳細度$ ］のうち最も高いものに等しい（ `is()$ps の挙動と一致する） — そのような選択子~listは存在しない場合、 ( 0, 0, 0 ) になるとする。 ◎ The specificity of the nesting selector is equal to the largest specificity among the complex selectors in the parent style rule’s selector list (identical to the behavior of :is()), or zero if no such selector list exists.

#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 {
      ...;
    }
  }
}

/* 
素朴に糖衣を外したとすると：
◎
naively desugars to
 */
.a1 .b1 .c1,
.a1 .b1 .c2,
.a1 .b1 .c3,
.a1 .b2 .c1,
.a1 .b2 .c2,
.a1 .b2 .c3,
.a1 .b3 .c1,
.a1 .b3 .c2,
.a1 .b3 .c3,
.a2 .b1 .c1,
.a2 .b1 .c2,
.a2 .b1 .c3,
.a2 .b2 .c1,
.a2 .b2 .c2,
.a2 .b2 .c3,
.a2 .b3 .c1,
.a2 .b3 .c2,
.a2 .b3 .c3,
.a3 .b1 .c1,
.a3 .b1 .c2,
.a3 .b1 .c3,
.a3 .b2 .c1,
.a3 .b2 .c2,
.a3 .b2 .c3,
.a3 .b3 .c1,
.a3 .b3 .c2,
.a3 .b3 .c3 {...}

`入子ng選択子$は、 `無特能$な要素に合致する能力がある — そのような要素が親~規則に合致した場合には。 ◎ The nesting selector is capable of matching featureless elements, if they were matched by the parent rule.

`複合-選択子$内では，`入子ng選択子$が どこに位置しようが挙動における相違は無いが （すなわち、 `&.foo^css と `.foo&^css は同じ要素たちに合致する）、 それでも，［ `複合-選択子$内に`型~選択子$が在る場合、 それは最初に来なければならない ］とする既存の規則は適用される （すなわち、 `&div^css は違法であり， 代わりに `div&^css と書かれなければならない）。 ◎ While the position of a nesting selector in a compound selector does not make a difference in its behavior (that is, &.foo and .foo& match the same elements), the existing rule that a type selector, if present, must be first in the compound selector continues to apply (that is, &div is illegal, and must be written div& instead).

5. 入子な宣言~列が成す規則

いくぶん技術的な理由から、 ~style規則の内容において，~prop宣言のうち［ 頭部に来るもの（先行する規則が無いもの）, 他のもの ］を判別-可能になることが重要になる。 ◎ For somewhat-technical reasons, it’s important to be able to distinguish properties that appear at the start of a style rule’s contents from those that appear interspersed with other rules.

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

これを成遂げるため、 ~CSS構文解析は，［ 後者の~propたちを包含するための特別な子~規則 ］内に`自動的に^em包装する。 しかしながら、 それらを `&$css 選択子を伴う`~style規則$内に包装した場合， いくぶん~~不都合な挙動になる： ◎ To accomplish this, CSS parsing automatically wraps such properties in a special child rule to contain them. However, if we were to wrap them in a style rule with an & selector, it would have somewhat unfortunate behavior:

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

類似に，入子な非-~style規則~内の子~宣言たちは、 何らかの仕方で`規則$として公開される必要がある — それらに類する（ `media$at の様な）規則は、 `style$m ~prop【すなわち`宣言$たち】を決して有さないので。 これらにも、 上と同じ問題が生じる。 ◎ Similarly, child declarations in nested non-style rules need to be exposed as rules in some way, because these sorts of rules (like @media) have never had style properties. These run into the same problems as above.

これらすべての課題に取組むため、 直に入子にされた［ 連続する~propたちが成す連なり ］は， `入子な宣言~列が成す規則@ 内に包装される。 ◎ To address all of these issue, we instead wrap runs of consecutive directly-nested properties in a nested declarations rule.

他が指定されない限り、 `入子な宣言~列が成す規則$は`入子な~style規則$であり， 他の~style規則と同じに動作する。 それは、 その親~style規則と正確に同じ［ 要素, 疑似要素 ］たちに合致し，詳細度の挙動も同じになる。 （これは、 `&$css 選択子を伴う~style規則に`類似する^emが、 上で説明したとおり，もう少し強力である。） ◎ Unless otherwise specified, a nested declarations rule is a nested style rule, and acts identically to any other style rule. It matches the exact same elements and pseudo-elements as its parent style rule, with the same specificity behavior. (This is similar to being a style rule with an & selector, but slightly more powerful, as explained above.)

.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$r は、 今や， `CSSStyleRule$I は子~規則を有せるものと定義する。 ◎ Note: [CSSOM-1] now defines that CSSStyleRule can have child rules.

`入子な~style規則$内の`相対~選択子$を直列化するときは、 当の選択子に暗黙な`入子ng選択子$を挿入して絶対~化するモノトスル。 ◎ When serializing a relative selector in a nested style rule, the selector must be absolutized, with the implied nesting selector inserted.

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

変更点

`2023年 2月 14日 作業草案＠~TR/2023/WD-css-nesting-1-20230214/$ からの有意な変更点： ◎ Significant changes since the Feb 14, 2023 Working Draft:

`入子ng選択子$は［ `無特能$な要素に合致することも許容される ］ことを明確化した。 ◎ Clarified that the nesting selector is allowed to match featureless elements.

`&div^css のような選択子は無効になるよう切替えた — 今や `CSS-SYNTAX-3$r が “無限な先読み” を行うので、 それを許容する必要は，もはやなくなった。 また、 そうすることで前処理器との衝突も避けられる。 （ `8662$issue ） ◎ Switched &div back to being invalid; now that Syntax does "infinite lookahead", we no longer need to allow it. Plus, doing so avoids a clash with preprocessors. (Issue 8662)

~CSSOMは，今や `CSSStyleRule$I を `CSSGroupingRule$I の下位classとして定義するので、 `cssRules^m 属性と関係する機構を成す手動な定義を除去した。 （ `8940$issue ） ◎ CSSOM now defines that CSSStyleRule is a CSSGroupingRule subclass, so the manual definition of the cssRules attribute and related machinery was removed. (Issue 8940)

入子ng選択子による詳細度に対する`暗黙な^em効果を明確化した。 （ `9069$issue ） ◎ Clarified the effect of the implied nesting selector on specificity. (Issue 9069)

規則と混ぜ合わされた宣言（および，入子な~group規則~内のすべての宣言）は、 自動的に `nest^at 規則~内に包装されるようにした （それに伴い， `nest^at 規則も追加した）。 （ `8738$issue ） ◎ Declarations intermixed with rules (or all declarations in nested group rules) are now automatically wrapped in @nest rules. (Also the @nest rule was added.) (Issue 8738)

`nest^at を`入子な宣言~列が成す規則$に置換した。 （ `10234$issue ） ◎ Replaced @nest with nested declarations rules. (Issue 10234)