CSSNestedDeclarations

The CSSNestedDeclarations interface of the CSS Rule API is used to group nested CSSRules.

The interface allows the CSS Object Model (CSSOM to mirror the structure of CSS documents with nested CSS rules, and ensure that rules are parsed and evaluated in the order that they are declared.

Note:>Browser versions with implementations that do not support this interface may parse nested rules in the wrong order.

CSSRule CSSNestedDeclarations

Instance properties

Inherits properties from its ancestor CSSRule.

CSSNestedDeclarations.style Read only

Returns the values of the nested rules.

Instance methods

No specific methods; inherits methods from its ancestor CSSRule.

Examples

CSS

The CSS below includes a selector .foo that contains two declarations and a media query.

css
.foo {
  background-color: silver;
  @media (screen) {
    color: tomato;
  }
  color: black;
}

This is represented by a number of JavaScript objects in the CSS Object Model:

  • A CSSStyleRule object that represents the background-color: silver rule. This can be returned via document.styleSheets[0].cssRules[0].
  • A CSSMediaRule object that represents the @media (screen) rule, and which can be returned via document.styleSheets[0].cssRules[0].cssRules[0].
    • The CSSMediaRule object contains a CSSNestedDeclaration object which represents the color: tomato rule nested by the @media (screen) rule. This can be returned via document.styleSheets[0].cssRules[0].cssRules[0].cssRules[0].
  • The final rule is a CSSNestedDeclaration object that represents the color: black rule in the stylesheet, and which can be returned via document.styleSheets[0].cssRules[0].cssRules[1].

Note: All top-level styles after the first CSSNestedDeclaration must also be represented as CSSNestedDeclaration objects in order to follow the CSS nested declarations rule

CSSOM (CSS Object Model)

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

Specifications

Specification
CSS Nesting Module
# cssnesteddeclarations

Browser compatibility

BCD tables only load in the browser

See Also