CSSNestedDeclarations
Baseline
2024
Newly available
Since December 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
CSSNestedDeclarations は CSS ルール API のインターフェイスで、入れ子になった CSSRule をグループ化するために使用されます。
このインターフェイスにより、 CSS オブジェクトモデル (CSSOM) は、入れ子になった CSS ルールを持つ CSS 文書の構造を反映し、ルールが宣言された順に確実に構文解析および評価が行われるようにします。
メモ: このインターフェイスに対応していない実装では、入れ子になったルールが間違った順序で構文解析される可能性があります。 詳しくはブラウザーの互換性を参照してください。
インスタンスプロパティ
祖先である CSSRule から継承したプロパティがあります。
CSSNestedDeclarations.style読取専用-
入れ子になったルールの値を返します。
インスタンスメソッド
固有のメソッドはありません。祖先である CSSRule から継承したメソッドがあります。
例
CSS
下記の CSS には、2 つの宣言と 1 つのメディアクエリーを含むセレクター .foo が含まれています。
.foo {
background-color: silver;
@media screen {
color: tomato;
}
color: black;
}
これは、CSS オブジェクトモデル 内のいくつもの JavaScript オブジェクトで表されます。
CSSStyleRuleオブジェクトで、background-color: silverルールを表します。 これはdocument.styleSheets[0].cssRules[0]で返されます。CSSMediaRuleオブジェクトで、@media screenルールを表します。これはdocument.styleSheets[0].cssRules[0].cssRules[0]で返されます。CSSMediaRuleオブジェクトにはCSSNestedDeclarationオブジェクトが含まれており、これは@media screenルールの入れ子になっているcolor: tomatoルールを表します。 これはdocument.styleSheets[0].cssRules[0].cssRules[0].cssRules[0]で返されます。
- 最後のルールは
CSSNestedDeclarationオブジェクトであり、スタイルシート内のcolor: blackルールを表します。これはdocument.styleSheets[0].cssRules[0].cssRules[1]で返されます。
メモ:
最初の CSSNestedDeclaration の後のすべての最上位スタイルも、CSS 入れ子の宣言ルールに従うために、CSSNestedDeclaration オブジェクトとして表現する必要があります。
CSSOM （CSS オブジェクトモデル）
↳ CSSStyleRule
.style
- background-color: silver
↳ CSSMediaRule
↳ CSSNestedDeclarations
.style (CSSStyleDeclaration, 1) =
- color: tomato
↳ CSSNestedDeclarations
.style (CSSStyleDeclaration, 1) =
- color: black
仕様書
| Specification |
|---|
| CSS Nesting Module # cssnesteddeclarations |
ブラウザーの互換性
Loading…