demo · v130

Live Nesting Editor

Edit CSS nesting live and see the CSSNestedDeclarations rule reflected in the CSSOM tree below. Chrome 130 wraps bare declarations that follow a nested rule in a CSSNestedDeclarations block — making them individually addressable in the CSSOM and preserving their source-order specificity.

Presets:

CSS (edit and click Apply)

HTML target

Live preview

CSSOM tree (simulated CSSNestedDeclarations structure)

/* Chrome 130: CSSNestedDeclarations rule */

.parent {
  color: blue;     /* normal bare declaration */

  &:hover {
    background: yellow;
  }

  /* ↓ Chrome 130: wrapped in CSSNestedDeclarations */
  font-size: 1.2em;   /* bare AFTER nested rule */
  font-weight: bold;  /* → accessible via cssRule.cssRules[1] */
}

/* Access via CSSOM */
const parentRule = sheet.cssRules[0];           // CSSStyleRule
const nestedHover = parentRule.cssRules[0];     // CSSStyleRule (&:hover)
const bareDecls   = parentRule.cssRules[1];     // CSSNestedDeclarations
bareDecls.style.fontSize;   // "1.2em" ← accessible ✓

see also