v130 · css

Component Cascade

Edit a nested stylesheet for a real UI component. Chrome 130's CSSNestedDeclarations keeps bare declarations in source order — watch the cascade resolution table update live to show which rule wins each property.

Feature detection: checking…
Nested CSS editor
Live component styling from editor above

Card title

Supporting body text for the demo card component.

CSSOM rule tree (parsed by Chrome 130)
Loading…

cascade resolution

property value (wins) winning rule source position 
/* Chrome 130: bare decls AFTER a nested rule stay in place */
.button {
  background: blue;       /* ← position 1 */

  &:hover { opacity: 0.85; }

  color: white;           /* ← position 3 (CSSNestedDeclarations) */
  /* Pre-130: 'color' was hoisted to position 1, before :hover */
  /* Chrome 130: source order wins — color stays after :hover */
}

see also