CSSNestedDeclarations: style property

Baseline 2023
Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

The read-only style property of the CSSNestedDeclarations interface represents the styles associated with the nested rules.

Value

An object.

Examples

This stylesheet contains a nested cssRules.

The first console.log shows the top-level style, the second shows the nested @media query with its nested style and the final shows the nested style declared after the @media query.

css
.foo {
  font-size: 1.2rem;
  @media (screen) {
    color: tomato;
    background-color: darkgrey;
  }
  color: black;
}
js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].style);
// { "0": "font-size" }
console.log(myRules[0].cssRules[0].cssRules[0].style);
// { "0": "color", "1": "background-color" }
console.log(myRules[0].cssRules[1].style);
// { "0": "color" }

Specifications

Specification
CSS Nesting Module
# dom-cssnesteddeclarations-style

Browser compatibility

BCD tables only load in the browser

See Also