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 が含まれています。

css

.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