demo · v130

CSSNestedDeclarations rule inspector

Edit the CSS, the engine parses it, and the tree below shows each child rule with its CSSOM type. Bare declarations after a nested rule live in a real CSSNestedDeclarations rule now — visible in DevTools and observable from script.

CSS source

parsed CSSOM tree



    

  


  

    
the code


const sheet = new CSSStyleSheet();
sheet.replaceSync(`
  .card {
    color: black;
    & .icon { color: blue; }
    background: gold;       /* lives in a CSSNestedDeclarations rule */
  }
`);

const cardRule = sheet.cssRules[0];
for (const r of cardRule.cssRules) {
  if (r instanceof CSSNestedDeclarations) {
    console.log("bare decls:", r.style.cssText);
  } else {
    console.log("nested rule:", r.cssText);
  }
}

  


  

    
see also