files/en-us/web/api/cssnesteddeclarations/style/index.md
{{APIRef("CSSOM")}}
The read-only style property of the {{domxref("CSSNestedDeclarations")}} interface represents the styles associated with the nested rules.
A {{domxref("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 {{domxref("CSSStyleDeclaration/cssText", "cssText")}} property. You can also modify the CSSStyleProperties object using the {{domxref("CSSStyleDeclaration/setProperty", "setProperty()")}} and {{domxref("CSSStyleDeclaration/removeProperty", "removeProperty()")}} methods.
This stylesheet contains a nested {{domxref("cssRule","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.
.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" }
{{Specifications}}
{{Compat}}