CSSNestedDeclarations: style property

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 read-only style property of the CSSNestedDeclarations interface represents the styles associated with the nested rules.

Value

A CSSStyleProperties object.

Although the style property itself is read-only in the sense that you can't replace the CSSStyleProperties object, you can still assign to the style property directly, which is equivalent to assigning to its cssText property. You can also modify the CSSStyleProperties object using the setProperty() and removeProperty() methods.

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;
}

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" }