CSS3

：

@規則

：

@nest

　編集：2022.07.08 by T.A.

→●、mdn

スタイル規則の入れ子。

@nest <selector-list> { <style-block> }

<selector-list>: ＝<complex-selector-list>
選択子リスト。
<style-block> ●: スタイル規則のブロックの内容を表現する。

<complex-selector-list>: ＝<complex-selector>#
複体選択子のリスト。

<complex-selector>: ＝<compound-selector> [<combinator>? <compound-selector>]*
複体選択子。

<compound-selector>: ＝[<type-selector>? <subclass-selector>*
[<pseudo-element-selector> <pseudo-class-selector>*]* ]!
合体選択子。

<combinator>: ＝'>' | '+' | '~' | [ '|' '|' ]
結合子（子孫結合子以外）。

<type-selector>: ＝<wq-name> | <ns-prefix>? '*'
型選択子。

<subclass-selector>: ＝<id-selector>
| <class-selector>
| <attribute-selector>
| <pseudo-class-selector>

<pseudo-element-selector>: ＝':' <pseudo-class-selector>
疑似要素。

<pseudo-class-selector>: ＝':' <ident-token> | ':' <function-token> <any-value> ')'¶
疑似クラス。

<wq-name>: ＝<ns-prefix>? <ident-token>

<ns-prefix>: ＝[<ident-token> | '*']? '|'
名前空間。

<id-selector>: ＝<hash-token>
ID 選択子。

<class-selector>: ＝'.' <ident-token>
クラス選択子。

<attribute-selector>: ＝'[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'
属性選択子。

<attr-modifier>: ＝i | s
属性値の文字大小の区別。

直に入れ子にすることで行えることは、@nest 規則でも行えるので、次は妥当になる：

.foo {
  color: red;
  @nest & > .bar {
    color: blue;
  }
}

これ↑は、次↓と等価になる：

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

@nest は、& で開始しない選択子も許容するので、次に挙げるものも妥当になる：

.foo {
  color: red;
  @nest .parent & {
    color: blue;
  }
}

これ↑は、次↓と等価になる：

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

.foo {
  color: red;
  @nest :not(&) {
    color: blue;
  }
}

これ↑は、次↓と等価になる：

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

テスト

ここに表示

ここに表示

スクリプト：

スクリプト：

表示内容：

表示内容：