css-nesting-ja.html

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8">
<title>CSS Nesting Module （日本語訳）</title>

<link rel="stylesheet" href="common.css" type="text/css">
<link rel="stylesheet" href="common-css.css" type="text/css">

<script src="common0.js"></script>
<script src="common1.js" async></script>

<script>

Util.ready = function(){
	const source_data = {
		generate: expand,
	};

	Util.switchWordsInit(source_data);
}

function expand(){
	const link_map = this.link_map;
	let context_prop = '';
	const class_map = this.class_map;
	const tag_map = this.tag_map;

	return this.html.replace(
		/%[\w\-~一-鿆]+|`(.*?)([$@^])(\w*)/g,
		create_html
	);

	function create_html(match, key, indicator, klass){
if(!indicator) {//%
	return `<var>${match.slice(1)}</var>`;
}

let href = '';
let href1 = '';
{
	const n = key.indexOf('＠');
	if(n > 0) {
		href1 = key.slice(n + 1);
		key = key.slice(0, n);
	}
}
let text = key;

switch(klass){
case 'r':
	text = `[${key}]`;
	href = `#biblio-${key.toLowerCase()}`;
	break;
case 'p':
	{
		const i = text.indexOf(':');
		if( i > 0 ){
			key = text.slice(0, i);
			text = `${key}: <code class="value">${text.slice(i+1)}</code>`;
		}
	}
	break;
case 'pe': 
	text = `::${key}`;
	break;
case 'ps': 
	text = `:${key}`;
	break;
case 'at': 
	text = `@${key}`;
	break;
case 't':
	text = `&lt;${key}&gt;`;
	break;
case 'v': // css values
	href = context_prop + key;
	break;
case 'm':
	{
		const n = text.indexOf('(');
		if(n > 0){
			key = text.slice(0, n);
			text = key + text.slice(n).replace(/\w+/g, '<var>$&</var>');
		}
	}
	break;
case 'l':
	text = `"<code class="literal">${key}</code>"`;
	break;
case 'U':
	text = `U+${key}`;
	break;
case 'en':
	return `<span lang="en">${key}</span>`;
	break;
case 'issue':
	text = `課題 #${key}`;
	href = `~CSSissue/${key}`;
	break;
}

let tag = tag_map[klass];
if(tag) {
	let classname = class_map[klass];
	classname = classname ? ` class="${classname}"` : '';
	text = `<${tag}${classname}>${text}</${tag}>`;
}

if(indicator !== '^'){
	href = href1 || link_map[ klass ? `${klass}.${key}` : key ] || href;
	if(!href){
		console.log(match); // check error
		return match;
	}

	switch(indicator){
	case '$':
		text = `<a href="${href}">${text}</a>`;
		break;
	case '@':
		text = `<dfn id="${href.slice(1)}">${text}</dfn>`;
		break;
	default:
		console.log(match);
		return match;
	}
}

return text;

	}
}
</script>

<script type="text/plain" id="_source_data">


●●options

spec_title:CSS Nesting Module
spec_date:2024-11-06
trans_update:2024-12-09
source_checked:240625
page_state_key:CSS
original_url:https://drafts.csswg.org/css-nesting/
	abbr_url:CSSNESTING
spec_status:ED
ref_id_prefix:biblio-
ref_id_lowercase:true
site_nav:selector,css
conformance:css
copyright:2023,permissive
trans_1st_pub:2019-07-04


●●class_map
p:property
css:css
ps:pseudo
pe:pseudo
at:at-rule
v:value
e:element
U:code-point
cn:cp-name

●●tag_map
p:code
t:var
css:code
ps:code
pe:code
at:code
v:code
e:code
c:code
m:code
m1:code
I:code
U:span
cn:span
em:em
i:i

●●original_id_map
nested-declarations-rule:nested-declarations-rule①
nested-declarations-rules:nested-declarations-rule

●●link_map

	●IDL

Exposed:~WEBIDLjs#Exposed
SameObject:~WEBIDLjs#SameObject
PutForwards:~WEBIDLjs#PutForwards

I.CSSRule:~CSSOM1#cssrule
I.CSSStyleRule:~CSSOM1#cssstylerule
I.CSSGroupingRule:~CSSOM1#cssgroupingrule
I.CSSStyleProperties:~CSSOM1#cssstyleproperties
I.CSSNestedDeclarations:#cssnesteddeclarations

m.style:~CSSOM1#dom-cssstylerule-style
m1.style:#dom-cssnesteddeclarations-style
	＠~CSSOM1#dom-cssgroupingrule-cssrules
	＠~CSSOM1#dom-cssgroupingrule-insertrule

	●
e.div:~HEgrouping#the-div-element

	●CSS
css.&amp;:#selectordef-

ps.where():~SELECTORS4#where-pseudo
ps.is():~SELECTORS4#matches-pseudo
ps.scope:~SELECTORS4#scope-pseudo

pe.before:~CSSPSEUDO#selectordef-before
pe.after:~CSSPSEUDO#selectordef-after

p.background:~CSSBG#propdef-background
p.color:~CSSCOLOR#propdef-color

t.selector-list:~SELECTORS4#typedef-selector-list
t.relative-selector-list:~SELECTORS4#typedef-relative-selector-list
t.forgiving-selector-list:~SELECTORS4#typedef-forgiving-selector-list
t.scope-start:~CASCADE6#typedef-scope-start
t.scope-end:~CASCADE6#typedef-scope-end
t.block-contents:~CSSSYN#typedef-block-contents
t.rule-list:~CSSSYN#typedef-rule-list
t.delim-token:~CSSSYN#typedef-delim-token

at.layer:~CASCADE#at-ruledef-layer
at.scope:~CASCADE6#at-ruledef-scope
at.media:~CSSCOND#at-ruledef-media
at.supports:~CSSCOND#at-ruledef-supports
at.container:~CSSCOND5#at-ruledef-container

入子な~style規則:#nested-style-rule
入子な条件付き規則:#conditionals
入子な~group規則:#nested-group-rules
入子ng選択子:#nesting-selector
入子ng選択子を包含して:#contain-the-nesting-selector
入子な宣言~列が成す規則:#nested-declarations-rule
入子な宣言~群~規則:#nested-declarations-rule

詳細度:~SELECTORS4#specificity
選択子:~SELECTORS4#selector
型~選択子:~SELECTORS4#type-selector
単純-選択子:~SELECTORS4#simple
複階-選択子:~SELECTORS4#complex
複合-選択子:~SELECTORS4#compound
選択子~list:~SELECTORS4#selector-list
相対~選択子:~SELECTORS4#relative-selector
結合子:~SELECTORS4#selector-combinator
子孫~結合子:~SELECTORS4#descendant-combinator
無効な選択子:~SELECTORS4#invalid-selector
無特能:~SELECTORS4#featureless

~cascade:~CASCADE#cascade
出現順序:~CASCADE#cascade-order
	~CASCADE#cascade-sort

規則:~CSSSYN#css-rule
~style規則:~CSSSYN#style-rule
~at-規則:~CSSSYN#at-rule
宣言:~CSSSYN#declaration

条件付き~group規則:~CSSCOND#conditional-group-rule

~CSS宣言~block:~CSSOM1#css-declaration-block
dB.宣言~群:~CSSOM1#cssstyledeclaration-declarations
dB.算出-済みか:~CSSOM1#cssstyledeclaration-computed-flag
dB.読専か:~CSSOM1#cssstyledeclaration-readonly-flag
dB.親~CSS規則:~CSSOM1#cssstyledeclaration-parent-css-rule
dB.所有者~node:~CSSOM1#cssstyledeclaration-owner-node
指定d順:~CSSOM1#concept-declarations-specified-order

~monkey~patch:~DESIGN-PRINCIPLES#monkey-patch

●●words_table1

CASCADE6:https://drafts.csswg.org/css-cascade-6/

●●words_table

	●CSS
単純-:simple::~
詳細度:specificity::~
CSSOM:
出現順序:order of appearance:~
無特能:featureless::~
supports:
暗な:darkな::暗い
	“暗な~mode”:darkmode

	^v:red
	^v:blue
	視野~付き:scoping
	優先され:win／:lose
	条件付き規則:conditional

	●構造
直な:directな:~
入子を:nest-::入れ子を
入子法:nesting::入れ子法
	入子法:Nesting
	入子にされない:unnested
	それらの順序:relative order
参照r:refer:参照
差挟まれ:interleaveされ:差し挟まれ
生な:raw:~
深く:deepに:~
隣接な:adjacentな:隣接する
縮約-:collapse:~

	何~層でも:more than one 〜 in as many levels
	連続する:Runs of consecutive
	後にある:later
	他のどの規則よりも前に:start
	にある:coming
	頭部に来るもの（先行する規則が無いもの）, 他のもの:at the start of 〜 those that appear interspersed
	後続-:following
	他の規則より前へ:at the front
	~group化:grouped

	●構文
糖衣:sugar::~
	糖衣を外す:desugar
集約-:aggregate:~
周囲の:surrounding:~
導入部:prelude::~
混合-:mix:~
量:amount:~
展開-:expand:~
遭遇-:encounter:~
変形-:transform::~
	変形するもの:transformation
先読み:lookahead::~
連なり:run:~

	混合-法:mixing
	混ぜ合わせ:intermix
	混ぜ合わさ:intermix
	来る:come
	来な:come
	記され:written
	書く:write
	書きたい:write
	書ける:write
	〜を書くための:〜-writing
	書かれ:written
	書き直せ:rewritten
	中で一緒にされ:directly appended together
	識別子:ident
	積み上げる:stack up
	短い:small
	二重にする:doubled-up
	回数:repetition
	何回も繰返される:have significant repetition
	先頭に置く必要はない:n’t have to be at the beginning of
	先頭:very start of
	先頭の:initial
	そのまま:as-is

	●仕様
保守能:maintainability:~
編集-:edit:~
編集:editing:~
背後:behind:~
素朴:naive:~
機能-:function:~
複雑:complicated:~
採用-:adopt:~
普通の:ordinaryな:~
指数関数的:exponential:~
爆発:explosion:~
膨大:massive:~
不用意:accidental:~
判定-:judge:~
経験的:heuristical:~
導入:introduction:~
variation::::バリエーション
trade-off::::トレードオフ
比較的:relativeに:~
緩めた:relaxした:~
回復:recovery:~
monkey:
patch::::パッチ
元々:originalに:~
捕える:catchする:~
句-:phrase:~
完璧:perfect:~
違法:illegal:~
説明書き:explainer:~
馴染み:familiar:~
手軽:handy:~
切替えた:switchした:切り替えた
切替える:switchする:切り替える
種類:kind:~
衝突:clash:~
機構:machinery:~
保つ:keepする:~

	~module性:modularity
	アリ性:possibility
	受容-可能でない:unacceptable
	高める:increase
	見える:look
	それこそが:that is, after all
	要:the entire point
	適用-可能:applicable
	これまでの:to date
	-:portion of 〜 for one version of the [CSS3COLOR] module
	可能に:able to
	一致する:equivalent
	〜かどうか調べる:looking for
	ついて来る:comes with
	課-:impose
	以前からある:predate
	多くが〜こともあって:largely because
	遥かに超える:much, much more!
	最悪な~~事態:the worst
	解消される:eliminate 〜 entirely
	作れる:make
	それほど多量に:as much
	築き上げる:build up
	有用さを少し減らす:making 〜 slightly less useful
	注意:notably
	〜だけで:on 's own
	ではなぜ:That skirts the question, tho:
	役立たずに見える:silly
	^en:versus
	少なくとも:at minimum
	と併用する例:Example usage with
	事実:fact
	変化しない:unchanged
	特有な働き:specifics of how 〜 work
	かまわない^em:can freely
	読み難く:harder to read
	紛らわしく:confusing
	ため、:sake
	入子な規則を~supportしない:older
	ことになろう:also happen to
	特に:notably
	~~含まれる:counts as
	課され:impose
	〜だけが変更される:just
	`SELECTORS-4$r:Selectors
	~version付け:versioning
	幸いにも:luckily
	この仕様:CSS Nesting
	そもそも:in the first place
	できるようにする:lets you
	あったとする:imagine you have some
	-:notice
	~~簡潔:compact
	併用:mix
	およそ:nearly
	また:plus
	主に:major
	扱いを違える:treat 〜 differently
	~~不都合:unfortunate
	されないとき:*non*-
	が生じる:run into
	同じに:identically
	し得る:potentially
	特に:notably
	ようになる:get 〜
	に類する:sort
	まったく:never
	可能にする:lets us do so
	`CSS-SYNTAX-3$r:Syntax

	●未分類
重合しな:overlapしな:重なり合わな
連結-:concatenate:~
megabyte::::メガバイト
component::::コンポーネント
付する:attachする:~
前処理器:preprocessor::~::プリプロセッサ
hover:

	Sass
	BEM
	^v:blue
	^v:red
	^v:white
	^v:black

	得られ:get
	遅く:slower
	可能:able
	小さな:small
	最も近い:nearest
	最も高い:highest
	より高い:larger
	最も高い:largest
	〜を問わず:of either 〜
	いくつもの:lots of
	他:otherwise
	-:individual
	同時に:simultaneous
	上の:the previous
	変わり:vary
	何か:anything
	合致するものは無い:fails to match anything
	それでも:continue
	含む:include
	絶対~化:absolutize
	直前の:the previous
	現れな:appearしな
	現れる:appearする
	~~現れる:show up
	片:snippet
	-:place
	非-:non
	書かれ:written
	~F:unset

●●ref_normative

[CSS-CASCADE-4]
    Elika Etemad; Tab Atkins Jr.. ＜CSS Cascading and Inheritance Level 4＞. URL: https://drafts.csswg.org/css-cascade-4/
[CSS-CASCADE-6]
    Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. ＜CSS Cascading and Inheritance Level 6＞. URL: https://drafts.csswg.org/css-cascade-6/
[CSS-COLOR-4]
    Chris Lilley; Tab Atkins Jr.; Lea Verou. ＜CSS Color Module Level 4＞. URL: https://drafts.csswg.org/css-color-4/
[CSS-CONDITIONAL-3]
    Chris Lilley; David Baron; Elika Etemad. ＜CSS Conditional Rules Module Level 3＞. URL: https://drafts.csswg.org/css-conditional-3/
[CSS-SYNTAX-3]
    Tab Atkins Jr.; Simon Sapin. ＜CSS Syntax Module Level 3＞. URL: https://drafts.csswg.org/css-syntax/
[CSS21]
    Bert Bos; et al. ＜Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification＞. URL: https://drafts.csswg.org/css2/
[CSSOM-1]
    Daniel Glazman; Emilio Cobos Álvarez. ＜CSS Object Model (CSSOM)＞. URL: https://drafts.csswg.org/cssom/
[RFC2119]
    S. Bradner. ＜Key words for use in RFCs to Indicate Requirement Levels＞. March 1997. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119
[SELECTORS-4]
    Elika Etemad; Tab Atkins Jr.. ＜Selectors Level 4＞. URL: https://drafts.csswg.org/selectors/
[WEBIDL]
    Edgar Chen; Timothy Gu. ＜Web IDL Standard＞. Living Standard. URL: https://webidl.spec.whatwg.org/

●●ref_informative

[CSS-BACKGROUNDS-3]
    Elika Etemad; Brad Kemper. ＜CSS Backgrounds and Borders Module Level 3＞. URL: https://drafts.csswg.org/css-backgrounds/
[CSS-CASCADE-5]
    Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. ＜CSS Cascading and Inheritance Level 5＞. URL: https://drafts.csswg.org/css-cascade-5/
[CSS-CONDITIONAL-5]
    Chris Lilley; et al. ＜CSS Conditional Rules Module Level 5＞. URL: https://drafts.csswg.org/css-conditional-5/
[CSS-PSEUDO-4]
    Daniel Glazman; Elika Etemad; Alan Stearns. ＜CSS Pseudo-Elements Module Level 4＞. URL: https://drafts.csswg.org/css-pseudo-4/
[CSS-UI-4]
    Florian Rivoal. ＜CSS Basic User Interface Module Level 4＞. URL: https://drafts.csswg.org/css-ui-4/


●●trans_metadata
<p>
~THIS_PAGEは、~W3Cにより編集者草案として公開された
<a href="~SPEC_URL">CSS Nesting Module</a>
を日本語に翻訳したものです。
~PUB
</p>

●●spec_metadata

最新公表バージョン
	https://www.w3.org/TR/css-nesting-1/
公表履歴
	https://www.w3.org/standards/history/css-nesting-1/
フィードバック
	<a href="https://github.com/w3c/csswg-drafts/labels/css-nesting-1">CSSWG Issues Repository</a>

編集
	<a href="http://xanthir.com/contact/">Tab Atkins-Bittner</a> (Google)
	<a href="https://nerdy.dev/">Adam Argyle</a> (Google)

Suggest an Edit for this Spec
	<a href="https://github.com/w3c/csswg-drafts/blob/main/css-nesting-1/Overview.bs">GitHub Editor</a>
commit 履歴
	https://github.com/w3c/csswg-drafts/commits/main/css-nesting-1
</script>

<body>

<header>
	<hgroup>
<h1>CSS Nesting Module</h1>
	</hgroup>

</header>

<div id="MAIN" hidden>

	<section id="abstract">
◎要約

<p>
この~moduleは、
`~style規則$を別の規則の内側に
— 親~規則の`選択子$に相対的な，子~規則の`選択子$を伴わせて —
入子にする能を導入する。
これは、~CSS~stylesheetの~module性と保守能を高める。
◎
This module introduces the ability to nest one style rule inside another, with the selector of the child rule relative to the selector of the parent rule. This increases the modularity and maintainability of CSS stylesheets.
</p>

~CSSisaLANG

	</section>
	<section id="sotd">
◎位置付け

<p>
これは、編集者草案の公な複製です…
【以下、この節の内容は，~SOTD-CSSに移譲。】
</p>

	</section>

<main id="MAIN0">

	<section id="intro">
<h2 title="Introduction">1. 序論</h2>

◎非規範的

<p>
この~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.
</p>

		<section id="placement">
<h3 title="Module Interactions">1.1. ~module間の相互作用</h3>

<p>
この~moduleは：
◎
This module＼
</p>
<ul>
	<li>
`CSS21$r 構文解析器~modelを拡張する新たな構文解析器~規則を導入する。
◎
introduces new parser rules that extend the [CSS21] parser model.＼
</li>
	<li>
`SELECTORS-4$r ~moduleを拡張する選択子を導入する。
◎
It introduces selectors that extend the [SELECTORS-4] module.＼
</li>
	<li>
`CSSOM$r【！CSSOM-1】 ~moduleに定義された一部の~IDLと~algoを拡張して改変する。
◎
It extends and modifies some IDL and algorithms defined in the [CSSOM-1] module.
</li>
</ul>

		</section>
		<section id="values">
<h3 title="Values">1.2. 値</h3>

<p>
この仕様は、新たな~propや値は定義しない。
◎
This specification does not define any new properties or values.
</p>

		</section>
	</section>
	<section id="_conventions">
<h2>【この訳に特有な表記規約】</h2>

◎表記記号

	</section>
	<section id="explainer">
<h2 title="Explainer">2. 説明書き</h2>

◎非規範的

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

<pre class="lang-css">
.foo {
  color: green;
}
.foo .bar {
  font-size: 1.4rem;
}
</pre>

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

<pre class="lang-css">
.foo {
  color: green;
  .bar {
    font-size: 1.4rem;
  }
}
</pre>

<p>
`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.
</p>

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

<pre class="lang-css">
main {
  div { ... }
  .bar { ... }
  #baz { ...}
  :has(p) { ... }
  ::backdrop { ... }
  [lang|="zh"] { ... }
  * { ... }
}
</pre>

<p>
既定では、
子~規則の選択子は，
`子孫~結合子$を挟んで親~規則と接続するものと見做されるが、
入子な選択子は，どの結合子からでも開始するよう変更できる：
◎
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:
</p>

<pre class="lang-css">
main {
  + article { ... }
  &gt; p { ... }
  ~ main { ... }
}
</pre>

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

<pre class="lang-css">
main {
  &amp; + article { ... }
  &amp; &gt; p { ... }
  &amp; ~ main { ... }
}
</pre>

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

<pre class="lang-css">
ul {
  padding-left: 1em;
}
.component ul {
  padding-left: 0;
}
</pre>

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

<pre class="lang-css">
ul {
  padding-left: 1em;
  .component &amp; {
    padding-left: 0;
  }
}
</pre>

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

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

<pre class="lang-css">
a {
  color: blue;
  &amp;:hover {
    color: lightblue;
  }
}
</pre>

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

<p>
すでに入子にされた~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.
</p>

	</section>
	<section id="nesting">
<h2 title="Nesting Style Rules">3. ~style規則の入子法</h2>

<p>
`~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.
</p>

<p>
`入子な~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.
</p>

<div class="example">
<p>
すなわち、
次の様な入子な~style規則は：
◎
That is, a nested style rule like:
</p>

<pre class="lang-css">
.foo {
  color: red;

  a {
    color: blue;
  }
}
</pre>

<p>
妥当であり，
次と等価になる：
◎
is valid, and equivalent to:
</p>

<pre class="lang-css">
.foo {
  color: red;
}
.foo a {
  color: blue;
}
</pre>

<p class="trans-note">【
この事例では、
`a^css は`相対~選択子$であり，
その先頭には暗黙な`子孫~結合子$が在ると見なされる。
】</p>
</div>

<div class="example">
<p>
入子にされた規則は、
`入子ng選択子$を利用して，親~規則に合致した要素も直に参照rできる。
◎
The nested rule can also use the nesting selector to directly refer to the parent rule’s matched elements, or use relative selector syntax to specify relationships other than "descendant".
</p>

<pre class="lang-css">
.foo {
  color: red;

  &amp;:hover {
    color: blue;
  }
}

/* <span class="comment">
は、
次と等価になる：
◎
equivalent to
</span>
  .foo { color: red; }
  .foo:hover { color: blue; }
*/
</pre>
</div>

<div class="example">
<p>
入子にされた規則は、
`相対~選択子$の構文を利用して，
“子孫” 以外の関係性も指定できる：
◎
↑</p>

<pre class="lang-css">
.foo {
  color: red;

  + .bar {
    color: blue;
  }
}

/* <span class="comment">
は、
次と等価になる：
◎
equivalent to
</span>
  .foo { color: red; }
  .foo + .bar { color: blue; }
*/
</pre>
</div>

		<section id="syntax">
<h3 title="Syntax">3.1. 構文</h3>

<p>
`~style規則$の内容は、
既存の`宣言~群$dBに加えて，今や［
`入子な~style規則$, `~at-規則$
］も受容する。
◎
The contents of style rules now accepts nested style rules and at-rules, in addition to the existing declarations.
</p>

<p>
`入子な~style規則$は、
入子にされない規則とは，次に挙げる仕方で相違する：
◎
Nested style rules differ from non-nested rules in the following ways:
</p>
<ul>
	<li>
`入子な~style規則$は、
その .導入部として `relative-selector-list$t を受容する
（ `selector-list$t だけでなく）。
`相対~選択子$は、
`入子ng選択子$により表現される要素に相対的になる。
◎
A nested style rule accepts a &lt;relative-selector-list&gt; as its prelude (rather than just a &lt;selector-list&gt;). Any relative selectors are relative to the elements represented by the nesting selector.
</li>
	<li>
`relative-selector-list$t を成す各~選択子のうち［
`結合子$から開始しないが，`入子ng選択子を包含して$いるもの
］は、
`相対~選択子$ではないものと解釈される。
◎
If a selector in the &lt;relative-selector-list&gt; does not start with a combinator but does contain the nesting selector, it is interpreted as a non-relative selector.
</li>
</ul>

<p>
入子な~style規則が どう構文解析されるかについての精確な詳細は、
`CSS-SYNTAX-3$r にて定義される。
◎
The precise details of how nested style rules are parsed are defined in [CSS-SYNTAX-3].
</p>

<p class="trans-note">【
入子にされた構成子は［
`宣言$, `~style規則$
］どちらを開始しているのか紛らわしくもなり得るが
（例： `color:hover ...^css は、［
無効な値 `hover^v を伴う `color$p ~propの宣言,
`color^e 要素~用の`型~選択子$から始まる規則
］どちらに解釈するべきか？）、
まず宣言として構文解析するよう試行され，
失敗した場合は規則として構文解析される。
】</p>

<p>
無効な`入子な~style規則$は、
その内容とともに無視されるが，その親~規則を無効~化することはない。
◎
An invalid nested style rule is ignored, along with its contents, but does not invalidate its parent rule.
</p>

<p>
`相対~選択子$を伴う入子な規則は、
その暗黙な`入子ng選択子$の`詳細度$を含む。
例えば、
`.foo { &gt; .bar {...}}^css
の内縁~規則~用の詳細度は，
`.foo { &amp; &gt; .bar {...}}^css
のそれと同じになる。
◎
Nested rules with relative selectors include the specificity of their implied nesting selector. For example, .foo { &gt; .bar {...}} and .foo { &amp; &gt; .bar {...}} have the same specificity for their inner rule.
</p>

<div class="note">
<p>注記：
［
~CSSを生成する~toolのうち，入子ngを処理するもの
］には、
作者が［
選択子を文字列として連結して，
複数の入子ng~levelにまたがる 1 個の`単純-選択子$を築き上げる
］ことを許容するものもある。
これは，ときには、
【！ `https://en.wikipedia.org/wiki/CSS#:~:text=bem%20(block%2C%20element%2C%20modifier)^】
<abbr title="Block, Element, Modifier">BEM</abbr>
の様に，
階層的な~patternを成す名前で利用されることもある
— 当の選択子が内部的に何回も繰返されるとき、
その回数を抑制するためとして。
◎
Some CSS-generating tools that preprocess nesting will concatenate selectors as strings, allowing authors to build up a single simple selector across nesting levels. This is sometimes used with hierarchical name patterns like BEM to reduce repetition across a file, when the selectors themselves have significant repetition internally.
</p>

<p>
例えば、
ある~componentが~class `.foo^css を利用していて，
ある入子な~componentが~class `.fooBar^css を利用している場合、
`Sass＠https://sass-lang.com/$
においては，次のように書くこともできる：
◎
For example, if one component uses the class .foo, and a nested component uses .fooBar, you could write this in Sass as:
</p>

<pre class="lang-css">
.foo {
  color: blue;
  &amp;Bar { color: red; }
}
/* <span class="comment">
は、
Sass においては，次と等価になる：
◎
In Sass, this is equivalent to
</span>
  .foo { color: blue; }
  .fooBar { color: red; }
*/
</pre>

<p>
これは、
~CSSにおいては許容されない
— `入子ng選択子$【！nesting】は、
構文を変形するものではなく，親~選択子が実際に合致する要素に合致するので。
◎
This is not allowed in CSS, as nesting is not a syntax transformation, but rather matches on the actual elements the parent selector matches.
</p>

<p>
そもそも，選択子 `&amp;Bar^css は、
~CSSにおいては妥当でない
— `Bar^css が成す部分は、
`型~選択子$であり，`複合-選択子$においては最初に来なければならないので。
（すなわち、
`Bar&amp;^css と書かれなければならない）。
なので、
この仕様の構文は，幸いにも当の前処理器【すなわち Sass 】の構文とは重合しない。
◎
It is also true that the selector &amp;Bar is invalid in CSS in the first place, as the Bar part is a type selector, which must come first in the compound selector. (That is, it must be written as Bar&amp;.) So, luckily, there is no overlap between CSS Nesting and the preprocessor syntax.
</p>
</div>

<div class="algo">
<p>
`選択子$は、
次を満たすとき，
`入子ng選択子を包含して@
いるとされる
⇒
`any type of^en 選択子として
【当の文脈に適切な種別の`選択子の文法＠~SELECTORS4#grammar$に則って】
`構文解析-＠~CSSSYN#css-parse-something-according-to-a-css-grammar$した結果、
次を満たす `delim-token$t に遭遇した
⇒
.値 ~EQ `&amp;^l
（ `0026^U `AMPERSAND^cn ）
◎
A selector is said to contain the nesting selector if, when it was parsed as any type of selector, a &lt;delim-token&gt; with the value "&amp;" (U+0026 AMPERSAND) was encountered.
</p>

<p class="note">注記：
これは、
`:is(:unknown(&amp;), .bar)^css の様な事例
を捕えるため，この明示的な方式で句される。
この選択子には、
`&amp;$css を包含する唯一の部分として，未知な選択子（ `unknown()^ps ）がある
（未知なので、
その引数が選択子として構文解析されるよう`意味されたもの^emか否か，知る仕方は無い）。
この未知な選択子は、［
より新たな~browserにおいては、
完璧に妥当な選択子として~supportされる
］`ようになるかもしれず^em，［
構文解析は、
無関係な~version付けの課題に依存しないことが求まれる
］ので、
依然として`入子ng選択子を包含して$いるものと扱われる。
◎
Note: This is phrased in this explicit manner so as to catch cases like :is(:unknown(&amp;), .bar), where an unknown selector (which, being unknown, we have no way of knowing whether the argument is meant to be parsed as a selector or not) is the only part of the selector that contains an &amp;. As that might be a perfectly valid selector that’s only supported by newer browsers, and we don’t want parsing to be dependent on unrelated versioning issues, we treat it as still containing the nesting selector.
</p>
</div>

<p>
`forgiving-selector-list$t を成す~itemは、
`入子ng選択子を包含して$いるが`無効な選択子$であっても，
破棄されることなく正確にそのまま保全される。
（これは、
当の選択子を照合するときの挙動を変更しない
— それでも、
無効な選択子に合致するものは無いが。
選択子の直列化だけが変更される。）
◎
If a &lt;forgiving-selector-list&gt; has an item that contains the nesting selector but is invalid, that item is preserved exactly as-is rather than being discarded. (This does not change the matching behavior of the selector—an invalid selector still fails to match anything—just the serialization of the selector.)
</p>

<p class="issue">
前~段落は、
`&amp;$css を `SELECTORS-4$r へ移動するに伴い，そこへ移動する必要がある。
これは，`~monkey~patch$であるが、
便利~用にここに与えている。
◎
The preceding paragraph needs to move to Selectors when we move &amp; itself to Selectors; I’m monkey-patching for convenience here.
</p>

		</section>
		<section id="syntax-examples">
<h3 title="Examples">3.2. 例</h3>

<div class="example">
<p>
`&amp;^css （`入子ng選択子$）は、
それだけでも選択子として利用できる：
◎
/* &amp; can be used on its own */
</p>

<pre class="lang-css">
.foo {
  color: blue;
  &amp; &gt; .bar { color: red; }
  &gt; .baz { color: green; }
}

/* <span class="comment">
は、
次と等価になる：
◎
equivalent to
</span>
  .foo { color: blue; }
  .foo &gt; .bar { color: red; }
  .foo &gt; .baz { color: green; }
*/
</pre>
</div>

<div class="example">
<p>
`複合-選択子$における `&amp;^css は、
親の選択子を精緻化する：
◎
/* or in a compound selector, refining the parent’s selector */
</p>

<pre class="lang-css">
.foo {
  color: blue;
  &amp;.bar { color: red; }
}

/* <span class="comment">
は、
次と等価になる：
◎
equivalent to
</span>
  .foo { color: blue; }
  .foo.bar { color: red; }
*/
</pre>
</div>

<div class="example">
<p>
選択子~listを成す各~選択子は、
どれも，親に相対的になる：
◎
/* multiple selectors in the list are all relative to the parent */
</p>

<pre class="lang-css">
.foo, .bar {
  color: blue;
  + .baz, &amp;.qux { color: red; }
}

/* <span class="comment">
は、
次と等価になる：
◎
equivalent to
</span>
  .foo, .bar { color: blue; }
  :is(.foo, .bar) + .baz,
  :is(.foo, .bar).qux { color: red; }
*/
</pre>
</div>

<div class="example">
<p>
`&amp;^css は、
単独の選択子~内で複数回~利用できる：
◎
/* &amp; can be used multiple times in a single selector */
</p>

<pre class="lang-css">
.foo {
  color: blue;
  &amp; .bar &amp; .baz &amp; .qux { color: red; }
}

/* <span class="comment">
は、
次と等価になる：
◎
equivalent to
</span>
  .foo { color: blue; }
  .foo .bar .foo .baz .foo .qux { color: red; }
*/
</pre>
</div>

<div class="example">
<p>
`&amp;^css は、
選択子の先頭に置く必要はない：
◎
/* &amp; doesn’t have to be at the beginning of the selector */
</p>

<pre class="lang-css">
.foo {
  color: red;
  .parent &amp; {
    color: blue;
  }
}

/* <span class="comment">
は、
次と等価になる：
◎
equivalent to
</span>
  .foo { color: red; }
  .parent .foo { color: blue; }
*/
</pre>

<p>
【`&amp;^css は、選択子とる引数にも利用できる：】
</p>

<pre class="lang-css">
.foo {
  color: red;
  :not(&amp;) {
    color: blue;
  }
}

/* <span class="comment">
は、
次と等価になる：
◎
equivalent to
</span>
  .foo { color: red; }
  :not(.foo) { color: blue; }
*/
</pre>
</div>

<div class="example">
<p>
`相対~選択子$を利用した場合、
先頭の `&amp;^css が自動的に含意される：
◎
/* But if you use a relative selector, an initial &amp; is implied automatically */
</p>

<pre class="lang-css">
.foo {
  color: red;
  + .bar + &amp; { color: blue; }
}

/* <span class="comment">
は、
次と等価になる：
◎
equivalent to
</span>
  .foo { color: red; }
  .foo + .bar + .foo { color: blue; }
*/
</pre>
</div>

<div class="example">
<p>
いくぶん役立たずに見えるが、
`&amp;^css だけでも利用できる：
◎
/* Somewhat silly, but &amp; can be used all on its own, as well. */
</p>

<pre class="lang-css">
.foo {
  color: blue;
  &amp; { padding: 2ch; }
}

/* <span class="comment">
は、
次と等価になる：
◎
equivalent to
</span>
  .foo { color: blue; }
  .foo { padding: 2ch; }
<span class="comment">
// あるいは次とも
◎
// or
</span>
.foo {
  color: blue;
  padding: 2ch;
}
*/
</pre>
</div>

<div class="example">
<p>
これも役立たずに見えるが、
`&amp;^css を二重にすることもできる：
◎
/* Again, silly, but can even be doubled up. */
</p>

<pre class="lang-css">
.foo {
  color: blue;
  &amp;&amp; { padding: 2ch; }
}
/* <span class="comment">
は、
次と等価になる：
◎
equivalent to
</span>
  .foo { color: blue; }
  .foo.foo { padding: 2ch; }
*/
</pre>
</div>

<div class="example">
<p>
親~選択子は、
任意に複雑にできる：
◎
/* The parent selector can be arbitrarily complicated */
</p>

<pre class="lang-css">
.error, #404 {
  &amp;:hover &gt; .baz { color: red; }
}
/* <span class="comment">
は、
次と等価になる：
◎
equivalent to
</span>
  :is(.error, #404):hover &gt; .baz { color: red; }
*/
</pre>

<pre class="lang-css">
.ancestor .el {
  .other-ancestor & { color: red; }
}
/* <span class="comment">
は、
次と等価になる：
◎
equivalent to
</span>
  .other-ancestor :is(.ancestor .el) { color: red; }
*/
</pre>
</div>

<div class="example">
<p>
入子な選択子も、
任意に複雑にできる：
◎
/* As can the nested selector */
</p>

<pre class="lang-css">
.foo {
  &amp; :is(.bar, &amp;.baz) { color: red; }
}
/* <span class="comment">
は、
次と等価になる：
◎
equivalent to
</span>
  .foo :is(.bar, .foo.baz) { color: red; }
*/
</pre>
</div>

<div class="example">
<p>
選択子を複数~levelに入子にして “積み上げる” ：
◎
/* Multiple levels of nesting "stack up" the selectors */
</p>

<pre class="lang-css">
figure {
  margin: 0;

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

    &gt; p {
      font-size: .9rem;
    }
  }
}
/* <span class="comment">
は、
次と等価になる：
◎
equivalent to
</span>
  figure { margin: 0; }
  figure &gt; figcaption { background: hsl(0 0% 0% / 50%); }
  figure &gt; figcaption &gt; p { font-size: .9rem; }
*/
</pre>
</div>

<div class="example">
<p>
~cascade層（ `layer$at ）と併用する例：
◎
/* Example usage with Cascade Layers */
</p>

<pre class="lang-css">
@layer base {
  html {
    block-size: 100%;

    body {
      min-block-size: 100%;
    }
  }
}
/* <span class="comment">
は、
次と等価になる：
◎
equivalent to
</span>
  @layer base {
    html { block-size: 100%; }
    html body { min-block-size: 100%; }
  }
*/
</pre>
</div>

<div class="example">
<p>
~cascade層を入子にする例：
◎
/* Example nesting Cascade Layers */
</p>

<pre class="lang-css">
@layer base {
  html {
    block-size: 100%;

    @layer support {
      body {
        min-block-size: 100%;
      }
    }
  }
}
/* <span class="comment">
は、
次と等価になる：
◎
equivalent to
</span>
  @layer base {
    html { block-size: 100%; }
  }
  @layer base.support {
    html body { min-block-size: 100%; }
  }
*/
</pre>
</div>

<div class="example">
<p>
視野~付き（ `scope$at ）と併用する例：
◎
/* Example usage with Scoping */
</p>

<pre class="lang-css">
@scope (.card) to (&gt; header) {
  :scope {
    inline-size: 40ch;
    aspect-ratio: 3/4;
				
    &gt; header {
      border-block-end: 1px solid white;
    }
  }
}
/* <span class="comment">
は、
次と等価になる：
◎
equivalent to
</span>
  @scope (.card) to (&gt; header) {
    :scope { inline-size: 40ch; aspect-ratio: 3/4; }
    :scope &gt; header { border-block-end: 1px solid white; }
  }
*/
</pre>
</div>

<div class="example">
<p>
視野~付きを入子にする例：
◎
/* Example nesting Scoping */
</p>

<pre class="lang-css">
.card {
  inline-size: 40ch;
  aspect-ratio: 3/4;

  @scope (&amp;) to (&gt; header &gt; *) {
    :scope &gt; header {
      border-block-end: 1px solid white;
    }
  }
}
/* <span class="comment">
は、
次と等価になる：
◎
equivalent to
</span>
  .card { inline-size: 40ch; aspect-ratio: 3/4; }
  @scope (.card) to (&gt; header &gt; *) {
    :scope &gt; header { border-block-end: 1px solid white; }
  }
*/
</pre>
</div>

		</section>
		<section id="conditionals">
<h3 title="Nesting Other At-Rules">3.3. 他の~at-規則の入子法</h3>

<p>
`入子な~style規則$に加えて、
この仕様は，`~style規則$の内側に
`入子な~group規則@
も許容する
⇒
~at-規則のうち，その本体が`~style規則$を包含し得るものは、
他の`~style規則$の内側に入子にできる。
◎
In addition to nested style rules, this specification allows nested group rules inside of style rules: any at-rule whose body contains style rules can be nested inside of a style rule as well.
</p>

<p>
`入子な~group規則$が，この仕方で入子にされたときは、
当の規則の内容は、
`rule-list$t としてではなく，
`block-contents$t として構文解析される：
◎
When nested in this way, the contents of a nested group rule's block are parsed as &lt;block-contents&gt; rather than &lt;rule-list&gt;:
</p>
<ul>
	<li>
【本体~内の】各`~style規則$は、
`入子な~style規則$になり，
その`入子ng選択子$の定義を最も近い先祖の`~style規則$からとる。
◎
Style rules are nested style rules, with their nesting selector taking its definition from the nearest ancestor style rule.
</li>
	<li>
~prop【宣言】は、
直に利用でき，`入子な宣言~列が成す規則$内に入子にされたかのように動作する。
◎
Properties can be directly used, acting as if they were nested in a nested declarations rule.
</li>
</ul>

<p class="note">注記：
特定的に，次に挙げる規則は、
`入子な~group規則$になる能力がある
⇒＃
すべての`条件付き~group規則$（ `container$at, `media$at, `supports$at ）,
`layer$at,
`scope$at
◎
Specifically, these rules are capable of being nested group rules:
• all the conditional group rules (@container, @media, @supports)
• @layer
• @scope
</p>

<p>
そのような`入子な~group規則$の意味と挙動は、
他においては，他が指定されない限り変化しない。
◎
The meanings and behavior of such nested group rules is otherwise unchanged, unless otherwise specified.
</p>

<div class="example">
<p>
例えば、
以下に挙げる条件付き規則の入子ngは，妥当になる。
◎
For example, the following conditional nestings are valid:
</p>

<p>
~propは直に利用できる：
◎
/* Properties can be directly used */
</p>

<pre class="lang-css">
.foo {
  display: grid;

  @media (orientation: landscape) {
    grid-auto-flow: column;
  }
}
/* <span class="comment">
は、
次と等価になる：
◎
equivalent to
</span> */
.foo {
  display: grid;
}
@media (orientation: landscape) {
  .foo {
    grid-auto-flow: column;
  }
}
</pre>

<div>
【！重複】
<pre class="_en" lang="en">
/* and also equivalent to the unnested: */
.foo { display: grid; }

@media (orientation: landscape) {
  .foo {
    grid-auto-flow: column;
  }
}
</pre>
</div>

<p>
条件付きも更に入子にできる：
◎
/* Conditionals can be further nested */
</p>

<pre class="lang-css">
.foo {
  display: grid;

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

    @media (min-width &gt; 1024px) {
      max-inline-size: 1024px;
    }
  }
}
/* <span class="comment">
は、
次と等価になる：
◎
equivalent to
</span> */
.foo { display: grid; }

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

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

<p>
~cascade層（ `layer$at ）を入子にする例：
◎
/* Example nesting Cascade Layers */
</p>

<pre class="lang-css">
html {
  @layer base {
    block-size: 100%;

    @layer support {
      &amp; body {
        min-block-size: 100%;
      }
    }
  }
}
/* <span class="comment">
は、
次と等価になる：
◎
equivalent to
</span> */
@layer base {
  html { block-size: 100%; }
}
@layer base.support {
  html body { min-block-size: 100%; }
}
</pre>

<p>
視野~付き（ `scope$at ）を入子にする例：
◎
/* Example nesting Scoping */
</p>

<pre class="lang-css">
.card {
  inline-size: 40ch;
  aspect-ratio: 3/4;

  @scope (&amp;) {
    :scope {
      border: 1px solid white;
    }
  }
}
/* <span class="comment">
は、
次と等価になる：
◎
equivalent to
</span> */
.card { inline-size: 40ch; aspect-ratio: 3/4; }
@scope (.card) {
  :scope { border-block-end: 1px solid white; }
}
</pre>
</div>

<p>
直に入子にされた各［
連続する~propたち
］は、
`入子な宣言~列が成す規則$内に自動的に包装される
（これは、
~CSSOMにおいて観測-可能になる）。
◎
Runs of consecutive directly-nested properties are automatically wrapped in nested declarations rules. (This is observable in the CSSOM.)
</p>

			<section id="nesting-at-scope">
<h4 title="Nested @scope Rules">3.3.1. 入子な `scope^at 規則</h4>

<p>
所与の `scope$at 規則 %規則 に対し：
◎
↓</p>
<ul>
	<li>
%規則 が`入子な~group規則$を成すときは、
%規則 の `scope-start$t における `&amp;$css 選択子は，最も近い先祖~style規則に合致した要素を参照rする。
◎
When the @scope rule is a nested group rule, an &amp; in the &lt;scope-start&gt; selector refers to the elements matched by the nearest ancestor style rule.
</li>
	<li>
%規則 の［
本体~内の~style規則／ `scope-end$t
］における `&amp;$css 選択子は、［
%規則 の `scope-start$t 選択子に合致している要素
］に合致するものとして扱われる。
【この段落の原文は，そのまま訳すと意味が通らないので、訳を改めている。】
◎
For the purposes of the style rules in its body and its own &lt;scope-end&gt; selector, the @scope rule is treated as an ancestor style rule, matching the elements matched by its &lt;scope-start&gt; selector.
</li>
</ul>

<div class="example">
<p>
すなわち、
次の~codeは：
◎
That is, the following code:
</p>

<pre class="lang-css">
.parent {
  color: blue;

  @scope (&amp; &gt; .scope) to (&amp; .limit) {
    &amp; .content {
      color: red;
    }
  }
}
</pre>

<p>
次と等価になる：
◎
is equivalent to:
</p>

<pre class="lang-css">
.parent { color: blue; }
@scope (.parent &gt; .scope) to (.parent &gt; .scope .limit) {
  .parent &gt; .scope .content {
    color: red;
  }
}
</pre>
</div>

			</section>
		</section>
		<section id="mixing">
<h3 title="Mixing Nesting Rules and Declarations">3.4. 入子ng規則と宣言の混合-法</h3>

<p>
~style規則が［
宣言, ［
`入子な~style規則$／`入子な~group規則$
］］両者を包含するときでも，
これら 3 種すべてを任意に混合できる。
［
すべての規則より後／規則たちの合間
］にある各［
一連の宣言
］は、
他の規則との相対的な順序を保全するため，
暗黙的に`入子な宣言~列が成す規則$内に包装される。
◎
When a style rule contains both declarations and nested style rules or nested group rules, all three can be arbitrarily mixed. Declarations coming after or between rules are implicitly wrapped in nested declarations rules, to preserve their order relative to the other rules.
</p>

<div class="example">
<p>
例えば、
次の~codeでは：
◎
For example, in the following code:
</p>

<pre class="lang-css">
article {
  color: green;
  &amp; { color: blue; }
  color: red;
}
/* <span class="comment">
は、
次と等価になる：
◎
equivalent to
</span> */
article { color: green; }
:is(article) { color: blue; }
article { color: red; }
/* <span class="comment">
が、
次と等価にはならない：
◎
NOT equivalent to
</span> */
article { color: green; }
article { color: red; }
:is(article) { color: blue; }
</pre>
</div>

<p>
`出現順序$を決定する目的においては、［
`入子な~style規則$／`入子な~group規則$
］は，その親~規則より`後^emに来るものと見なされる。
◎
For the purpose of determining the Order Of Appearance, nested style rules and nested group rules are considered to come after their parent rule.
</p>

<div class="example">
<p>
例えば：
◎
For example:
</p>

<pre class="lang-css">
article {
  color: blue;
  &amp; { color: red; }
}
</pre>

<p>
両~宣言とも，その詳細度は同じ (0,0,1) になるが、
入子な規則は親~規則より`後に来る^emものと見なされるので，
宣言 `color: red^css の方が~cascadeにおいて優先される。
◎
Both declarations have the same specificity (0,0,1), but the nested rule is considered to come after its parent rule, so the color: red declarations wins the cascade.
</p>

<p>
他方，次の例では：
◎
On the other hand, in this example:
</p>

<pre class="lang-css">
article {
  color: blue;
  :where(&amp;) { color: red; }
}
</pre>

<p>
`where()$ps 疑似類により`入子ng選択子$の詳細度は 0 に抑制されるので，
宣言 `color: red^css の詳細度は (0,0,0) になり、
`出現順序$が考慮される前に，
宣言 `color: blue^css の方が優先される。
◎
The :where() pseudoclass reduces the specificity of the nesting selector to 0, so the color: red declaration now has a specificity of (0,0,0), and loses to the color: blue declaration before "Order Of Appearance" comes into consideration.
</p>
</div>

<p class="note">注記：
宣言と入子な規則は，混ぜ合わせても`かまわない^emが、
そうすると，いくぶん［
読み難く／紛らわしく
］なる
— 後にある~prop【入子な規則より後にある宣言たち】は、［
~source~text内には現れない`入子な宣言~列が成す規則$
］内に自動的に包装されるので。
可読性を高めるため、
作者には，［
~style規則~内の~propすべてを入子な規則より前に置く
］ことが推奨される。
（そうすれば、
入子な規則を~supportしない~UAにおいても，少し良く動作することになろう
— 入子な規則より後に現れている~propは、
構文解析と~error回復に特有な働きに因り，飛ばせるようになるので。）
◎
Note: While one can freely intermix declarations and nested rules, it’s harder to read and somewhat confusing to do so, since the later properties are automatically wrapped in a nested declarations rule that doesn’t appear in the source text. For readability’s sake, it’s recommended that authors put all their properties first in a style rule, before any nested rules. (This also happens to act slightly better in older user agents: due to specifics of how parsing and error-recovery work, properties appearing after nested rules can get skipped.)
</p>

		</section>
	</section>
	<section id="nest-selector">
<h2 title="Nesting Selector: the &amp; selector">4. 入子ng選択子： `&amp;^css 選択子</h2>

<p>
`入子な~style規則$を利用するときには、
親~規則に合致した要素を参照r可能にする必要がある【！must】。
それこそが，`入子法の要^em を成す。
これを成遂げるため、
この仕様は，
`&amp;@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 &amp; (U+0026 AMPERSAND).
</p>

<p>
`入子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).
</p>

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

<div class="note">
<p>注記：
`入子ng選択子$による糖衣は、
それを［
親~style規則の選択子を `is()$ps 選択子で包装したもの
］に置換することより外せる（ `desugar^en できる）。
例えば：
◎
The nesting selector can be desugared by replacing it with the parent style rule’s selector, wrapped in an :is() selector. For example,
</p>

<pre class="lang-css">
a, b {
  &amp; c { color: blue; }
}
</pre>

<p>
は、
次に等価になる：
◎
is equivalent to
</p>

<pre class="lang-css">
:is(a, b) c { color: blue; }
</pre>
</div>

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

<div class="example">
<p>
例えば、
次の~style規則においては：
◎
For example, in the following style rule:
</p>

<pre class="lang-css">
.foo, .foo::before, .foo::after {
  color: red;

  &amp;:hover { color: blue; }
}
</pre>

<p>
`&amp;$css は，
`.foo^css に合致した要素に限り表現する
— 言い換えれば，次と等価になる：
◎
the &amp; only represents the elements matched by .foo; in other words, it’s equivalent to:
</p>

<pre class="lang-css">
.foo, .foo::before, .foo::after {
  color: red;
}
.foo:hover {
  color: blue;
}
</pre>
</div>

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

<p>
`入子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.
</p>

<div class="example">
<p>
例えば，次の~style規則が与えられたなら：
◎
For example, given the following style rules:
</p>

<pre class="lang-css">
#a, b {
  &amp; c { color: blue; }
}
.foo c { color: red; }
</pre>

<p>
次の様な~DOM構造においては：
◎
Then in a DOM structure like
</p>

<pre class="lang-html">&lt;b class=foo&gt;
  &lt;c&gt;Blue text&lt;/c&gt;
&lt;/b&gt;
</pre>

<p>
~textの色は、
`red^v ではなく `blue^v になる。
`&amp;$css の詳細度は［
`#a^css の詳細度 (1,0,0),
`b^css の詳細度 (0,0,1)
］のうち高い方 (1,0,0) になるので、
選択子~全体 `&amp; c^css の詳細度は (1,0,1) になる,
— それは `.foo c^css の詳細度 (0,1,1) より高い。
◎
The text will be blue, rather than red. The specificity of the &amp; is the larger of the specificities of #a ([1,0,0]) and b ([0,0,1]), so it’s [1,0,0], and the entire &amp; c selector thus has specificity [1,0,1], which is larger than the specificity of .foo c ([0,1,1]).
</p>

<p>
これは、［
入子ngを外して，入子にされない規則に手動で展開した場合に得られる結果
］とは`異なる^emことに注意。
そうした場合、
宣言 `color: blue^css は、
詳細度 (1,0,1) を伴う選択子 `#a c^css ではなく，
詳細度 (0,0,2) を伴う選択子 `b c^css に合致するので。
◎
Notably, this is different than the result you’d get if the nesting were manually expanded out into non-nested rules, since the color: blue declaration would then be matching due to the b c selector ([0,0,2]) rather than #a c ([1,0,1]).
</p>
</div>

<details class="note">
<summary>
なぜ、
入子にされない規則とは詳細度が異なるのか？
◎
Why is the specificity different than non-nested rules?
</summary>

<p>
`入子ng選択子$の詳細度は、
意図的に， `is()$ps 疑似類と同じ規則を利用するようにしてある。
それは、
各~引数の中で最も高い詳細度を利用するだけであり，
実際に合致した選択子が`どれなのか^emを追跡しない。
◎
The nesting selector intentionally uses the same specificity rules as the :is() pseudoclass, which just uses the largest specificity among its arguments, rather than tracking which selector actually matched.
</p>

<p>
これは、
処理能の理由から要求される。
選択子の詳細度を［
どれだけ精確に合致したかに依存して，アリなものが複数ある
］ようにした場合、
選択子の照合は，ずっと複雑で遅くなる。
◎
This is required for performance reasons; if a selector has multiple possible specificities, depending on how precisely it was matched, it makes selector matching much more complicated and slower.
</p>

<p>
ではなぜ `&amp;$css を `is()$ps の用語で定義するのか？
一部の非~browserによる［
入子法の様な機能性
］の実装は、
その多くが `is()^ps の導入~以前からあることもあって，
その糖衣を
— `is()^ps を通して外すことなく —
直に外す。
しかしながら，これには`有意な問題^emがついて来る
— 一部の（適度に共通的な）事例では、
指数関数的な爆発のアリ性に因り，不用意に`膨大^emな選択子を生産し得るので。
◎
That skirts the question, tho: why do we define &amp; in terms of :is()? Some non-browser implementations of Nesting-like functionality do not desugar to :is(), largely because they predate the introduction of :is() as well. Instead, they desugar directly; however, this comes with its own significant problems, as some (reasonably common) cases can accidentally produce massive selectors, due to the exponential explosion of possibilities.
</p>

<pre class="lang-css">
.a1, .a2, .a3 {
  .b1, .b2, .b3 {
    .c1, .c2, .c3 {
      ...;
    }
  }
}

/* <span class="comment">
素朴に糖衣を外したとすると：
◎
naively desugars to
</span> */
.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 {...}
</pre>

<p>
ここには、
入子ng~levelが 3 つあり，
各~levelは 3 個の選択子からなる~listを伴う
— 糖衣を外した結果， 27 個の選択子が生産される。
［
~listに もっと選択子を追加する／
もっと入子ng~levelを追加する／
入子な規則をもっと複階的にする
］ことで，［
何~megabyteもの（あるいは，それを遥かに超える）選択子に展開される
］ような比較的~短い規則を作れる。
◎
Here, three levels of nesting, each with three selectors in their lists, produced 27 desugared selectors. Adding more selectors to the lists, adding more levels of nesting, or making the nested rules more complex can make a relatively small rule expand into multiple megabytes of selectors (or much, much more!).
</p>

<p>
一部の~CSS~toolは、
一部の~variationを経験的に破棄することにより，この最悪な~~事態を避ける
— なので、
それほど多量に出力せずとも，`おそらく^em正しいものになろう【？】。
が、
それは~UAに可用な~optionではない。
◎
Some CSS tools avoid the worst of this by heuristically discarding some variations, so they don’t have to output as much but are still probably correct, but that’s not an option available to UAs.
</p>

<p>
この問題は、
代わりに `is()$ps を通して糖衣を外すことで解消される
— それは、
詳細度の有用さを少し減らす~costを伴うが，適度な~trade-offと判定された。
◎
Desugaring with :is() instead eliminates this problem entirely, at the cost of making specificity slightly less useful, which was judged a reasonable trade-off.
</p>
</details>

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

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

	</section>
	<section id="nested-declarations-rules">
<h2 title="The Nested Declarations Rule">5. 入子な宣言~列が成す規則</h2>

<p>
いくぶん技術的な理由から、
~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.
</p>

<div class="example">
<p>
例えば，次において：
◎
For example, in the following two rules:
</p>

<pre class="lang-css">
.foo {
  color: red;
  @media (...) {...}
  background: blue;
}
</pre>

<p>
宣言【！規則】 `color:red$p と
宣言【！規則】 `background:blue$p 
に対する扱いは，少し違える必要がある。
特に，~CSSOMにおいては、
`color:red^p は~style規則の `style$m 属性~内に公開される一方で，
`background:blue^p は~style規則の `childRules＠~CSSOM1#dom-cssgroupingrule-cssrules$c ~list内に~~現れる必要がある。
◎
We need to treat the color: red and background: blue slightly differently. In particular, in the CSSOM, the color: red is exposed in the style rule’s style attribute, while the background: blue needs to instead show up in its cssRules list.
</p>
</div>

<p>
これを成遂げるため、
~CSS構文解析は，［
後者の~propたちを包含するための特別な子~規則
］内に`自動的に^em包装する。
しかしながら、
それらを `&amp;$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 &amp; selector, it would have somewhat unfortunate behavior:
</p>

<div class="example">
<p>
例えば，次においては：
◎
For example, in
</p>
<pre class="lang-css">
.foo, .foo::before {
  color: red;
  &amp; {
    background: blue;
  }
}
</pre>

<p>
入子な規則は、
疑似要素【！要素】 `.foo::before^css に対しては `background$p ~propを`適用しない^em
— `&amp;$css は、
疑似要素を表現できないので。
◎
the nested rule does not apply the background property to the .foo::before elements, because the &amp; can’t represent pseudo-elements.
</p>
</div>

<p>
類似に，入子な非-~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.
</p>

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

<p>
他が指定されない限り、
`入子な宣言~列が成す規則$は`入子な~style規則$であり，
他の~style規則と同じに動作する。
それは、
その親~style規則と正確に同じ［
要素, 疑似要素
］たちに合致し，詳細度の挙動も同じになる。
<span class="note">
（これは、
`&amp;$css 選択子を伴う~style規則に`類似する^emが、
上で説明したとおり，もう少し強力である。）
</span>
◎
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 &amp; selector, but slightly more powerful, as explained above.)
</p>

<details class="note">
<summary>
なぜ`入子な宣言~列が成す規則$が存在するのか？
◎
Why does the nested declarations rule exist?
</summary>
<p>
この仕様は、
元々は~style規則~内のすべての宣言を一緒に~group化していた
— それらが［
元の所在から規則~内の頭部（他の規則より前）へ “移動され” ていた
］かのように動作するよう。
また、［
`入子な~group規則$の内側にある生な宣言たち
］を`入子ng選択子$を利用して，素な~style規則~内に自動的に包装していた
— `&amp; {...}^css の様に。
◎
Originally, this specification grouped all declarations in style rules together, "moving" them from their original location to act as if they were placed at the front of the rule. It also automatically wrapped raw declarations inside of nested group rules in plain style rules, using the &amp; selector.
</p>

<p>
代わりに`入子な宣言~列が成す規則$を利用するよう切替えた理由は、
主に 2 つある：
◎
There are two major reasons we switched to instead use the nested declarations rule.
</p>
<ul>
	<li>
宣言たちを［
`入子ng選択子$を利用して暗黙的に`入子な~group規則$内に包装する
］と，それらの挙動も変化する。
それは，親~style規則が疑似要素を包含する事例を
— この注記に後続する例に示されるとおり —
非互換化することに加え、
そうでない事例でも，入子な宣言~用の詳細度の挙動は変化し得る。
`入子な宣言~列が成す規則$へ切替えることは、
これらの問題を避けて，
`media$at 等々の挙動を入子にされたとき, されないときとで一致させる。
◎
First, using an &amp; {...} rule to implicitly wrap declarations in a nested group rule also changed the behavior. As shown in the example following this note, it breaks cases where the parent style rule contains pseudo-elements, and even when that’s not the case, it potentially changes the specificity behavior of the nested declarations. Switching to the nested declarations rule avoids these problems, making the behavior of nested @media/etc identical to the behavior of *non*-nested @media/etc.
</li>
	<li>
将来の~CSS特能（特に， “~mixin” ）には、［
差挟まれた宣言たちが当の~style規則~内で他の規則より前へ自動的に移動されると，
単純に正しく働かなくなる
］ような何らかの詳細がある。
それらは，他の規則との相対的な順序を保つ必要があり、
それらを~CSSOM内で実際に表現-可能にするためにも，
何らかの種類の規則で包装する必要がある
— が，通常の `&amp; {...}^css 規則だけ利用した場合、
前~段落と同じ課題が適用される。
`入子な宣言~列が成す規則$は、
副作用を伴うことなく，それを可能にする。
◎
Second, there are some details of future CSS features (notably, "mixins") that simply won’t work correctly if interleaved declarations are automatically moved to the front of the style rule. We need to keep their relative order with other rules, and in order to actually make that representable in the CSSOM, that means they have to be wrapped in some kind of rule. The same issues as the previous paragraph apply if we just use a normal &amp; {...} rule, so the nested declarations rule lets us do so without side effects.
</li>
</ul>
</details>

<div class="example">
<p>
例えば，次の~stylesheet片は：
◎
For example, in the following stylesheet snippet:
</p>

<pre class="lang-css">
.foo, .foo::before, .foo::after {
  color: black;
  @media (prefers-color-scheme: dark) {
    &amp; {
      color: white;
    }
  }
}
</pre>

<p>
~pageが “暗な~mode” 下にあるときは、
`.foo^css 要素の~text色を `white^v へ変更するが，［
`before$pe, `after$pe
］疑似要素のそれは `black^v であり続ける
— `&amp;$css 選択子は、
疑似要素を表現できないので。
◎
In a darkmode page, the .foo element would have its text color changed to white, but its ::before and ::after pseudos would remain black, because the &amp; selector can’t represent pseudo-elements.
</p>

<p>
しかしながら、
代わりに次のように書かれたなら：
◎
However, it was instead written as:
</p>

<pre class="lang-css">
.foo, .foo::before, .foo::after {
  color: black;
  @media (prefers-color-scheme: dark) {
    color: white;
  }
}
</pre>

<p>
`color:white$p は`入子な宣言~列が成す規則$内に暗黙的に包装され，
親~style規則と`正確に^em同じ対象に合致することが保証されるので、
要素, 疑似要素`どちらも^em，
その~text色は “暗な~mode” においては `white^v になる。
◎
Then the color: white is implicitly wrapped in a nested declarations rule, which is guaranteed to match exactly the same as its parent style rule, so the element and its pseudo-elements would all have white text in a darkmode page.
</p>
</div>

<div class="example">
<p>
規則たちに差挟まれた宣言たちは、
`入子な宣言~列が成す規則$内に暗黙的に包装されるようになり，
それらが別々な~style規則の一部を成すようにする。
例えば、
次の~CSSが与えられたなら：
◎
Declarations interleaved with rules get implicitly wrapped in a nested declarations rule, which makes them part of a separate style rule. For example, given this CSS:
</p>

<pre class="lang-css">
.foo {
  color: black;
  @media (...) {...}
  background: silver;
}
</pre>

<p>
`.foo^css 規則を表現する~CSSOM~obj %fooRule が精査されたとき、
%fooRule.`style$m は，宣言 `color:black$p のみを包含することになる。
◎
If the .foo rule’s CSSOM object is examined, its style attribute will contain only one declaration: the color: black one.
</p>

<p>
宣言 `background:silver$p は、
代わりに，
暗黙的に作成された`入子な宣言~列が成す規則$内で
— %fooRule.`cssRules[1].style^c にて —
見出されるようになる。
◎
The background: silver declaration will instead be found in the implicitly-created nested declarations child rule, at fooRule.cssRules[1].style.
</p>
</div>

	</section>
	<section id="cssom">
<h2 title="CSSOM">6. ~CSSOM</h2>

<p class="note">注記：
`CSSOM-1$r は、
今や， `CSSStyleRule$I は子~規則を有せるものと定義する。
◎
Note: [CSSOM-1] now defines that CSSStyleRule can have child rules.
</p>

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

<div class="example">
<p>
例えば，選択子 `&gt; .foo^css は、
`&amp; &gt; .foo^css として直列化されることになる。
◎
For example, the selector &gt; .foo will serialize as &amp; &gt; .foo.
</p>
</div>

		<section id="the-cssnestrule">
<h3 title="The CSSNestedDeclarations Interface">6.1. `CSSNestedDeclarations^I ~interface</h3>

<p>
`CSSNestedDeclarations$I ~interfaceは、
ある`入子な宣言~列が成す規則$を表現する。
◎
The CSSNestedDeclarations interface represents a nested declarations rule.
</p>

<pre class="idl">[`Exposed$=Window]
interface `CSSNestedDeclarations@I : `CSSRule$I {
  [`SameObject$, `PutForwards$=cssText] readonly attribute `CSSStyleProperties$I `style$m1;
};
</pre>

<div class="algo">
<p>
`style@m1
取得子~手続きは
⇒
~RET コレが表現する`入子な宣言~列が成す規則$用の［
次を伴う`~CSS宣言~block$
］を表現する `CSSStyleProperties$I ~obj
⇒＃
`算出-済みか$dB ~SET ~F,
`読専か$dB ~SET ~F,
`宣言~群$dB ~SET 当の規則~内に宣言された`指定d順$による宣言たち,
`親~CSS規則$dB ~SET コレ,
`所有者~node$dB ~SET ~NULL
◎
The style attribute must return a CSSStyleProperties object for the rule, with the following properties:
◎
computed flag
• Unset
readonly flag
• Unset
declarations
• The declared declarations in the rule, in specified order.
parent CSS rule
• this
owner node
• Null
</p>
</div>

<p>
`CSSNestedDeclarations$I 規則は、
その`~CSS宣言~block$が直に`直列化された＠~CSSOM1#serialize-a-css-declaration-block$かのように`直列化される＠~CSSOM1#serialize-a-css-rule$。
◎
The CSSNestedDeclarations rule serializes as if its declaration block had been serialized directly.
</p>

<p class="note">注記：
このことは、
隣接な複数個の`入子な宣言~列が成す規則$
（それは、
例えば `insertRule()＠~CSSOM1#dom-cssgroupingrule-insertrule$c で作成することがアリである）
は、
直列化されてから再び構文解析されたとき，
1 個の規則の中へ縮約されるようになることを意味する。
◎
Note: This means that multiple adjacent nested declarations rules (which is possible to create with e.g. insertRule) will collapse into a single rule when serialized and parsed again.
</p>

		</section>
	</section>
	<section id="changes">
<h2 title="Changes">変更点</h2>

<dl>
	<dt>
`2023年 2月 14日 作業草案＠~TR/2023/WD-css-nesting-1-20230214/$
からの有意な変更点：
◎
Significant changes since the Feb 14, 2023 Working Draft:
</dt>
	<dd>
`入子ng選択子$は［
`無特能$な要素に合致することも許容される
］ことを明確化した。
◎
Clarified that the nesting selector is allowed to match featureless elements.
</dd>
	<dd>
`&amp;div^css のような選択子は無効になるよう切替えた
— 今や `CSS-SYNTAX-3$r が “無限な先読み” を行うので、
それを許容する必要は，もはやなくなった。
また、
そうすることで前処理器との衝突も避けられる。
（ `8662$issue ）
◎
Switched &amp;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)
</dd>
	<dd>
~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)
</dd>
	<dd>
入子ng選択子による詳細度に対する`暗黙な^em効果を明確化した。
（ `9069$issue ）
◎
Clarified the effect of the implied nesting selector on specificity. (Issue 9069)
</dd>
	<dd>
規則と混ぜ合わされた宣言（および，入子な~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)
</dd>
	<dd>
`nest^at を`入子な宣言~列が成す規則$に置換した。
（ `10234$issue ）
◎
Replaced @nest with nested declarations rules. (Issue 10234)
</dd>
</dl>

	</section>
</main></div>