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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
CSSNestedDeclarations
style

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

See Also