CSSNestedDeclarations

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] で返されます。

CSSOM (CSS オブジェクトモデル)

↳ CSSStyleRule
 .style
 - background-color: silver
 ↳ CSSMediaRule
 ↳ CSSNestedDeclarations
 .style (CSSStyleDeclaration, 1) =
 - color: tomato
 ↳ CSSNestedDeclarations
 .style (CSSStyleDeclaration, 1) =
 - color: black

仕様書

ブラウザーの互換性

関連情報

• CSSNestedDeclarations.style
• 入れ子の宣言ルール