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

インスタンスプロパティ

祖先である 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

仕様書

Specification
CSS Nesting Module
# cssnesteddeclarations

ブラウザーの互換性

関連情報