TheCSSNestedDeclarations interface of theCSS Rule API is used to group nestedCSSRules.

The interface allows theCSS 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.

Instance properties

Inherits properties from its ancestorCSSRule.

CSSNestedDeclarations.styleRead only

Returns the values of the nested rules.

Instance methods

No specific methods; inherits methods from its ancestorCSSRule.

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 theCSS Object Model:

• ACSSStyleRule object that represents thebackground-color: silver rule.This can be returned viadocument.styleSheets[0].cssRules[0].
• ACSSMediaRule object that represents the@media screen rule, and which can be returned viadocument.styleSheets[0].cssRules[0].cssRules[0].
  • TheCSSMediaRule object contains aCSSNestedDeclaration object which represents thecolor: tomato rule nested by the@media screen rule.This can be returned viadocument.styleSheets[0].cssRules[0].cssRules[0].cssRules[0].
• The final rule is aCSSNestedDeclaration object that represents thecolor: black rule in the stylesheet, and which can be returned viadocument.styleSheets[0].cssRules[0].cssRules[1].

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