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.

.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

Browser compatibility

See Also

• CSSNestedDeclarations.style
• The Nested Declarations Rule