1. Web
  2. Web APIs
  3. CSSNestedDeclarations

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.

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: Implementations that do not support this interface may parse nested rules in the wrong order. See Browser compatibility for more information.

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)

↳ 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

See Also

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content