demo · v130

Specificity Explorer

Chrome 130 stabilises the handling of bare declarations inside CSS nesting blocks via the CSSNestedDeclarations rule. The critical change: bare declarations that appear after a nested rule now correctly get the specificity of the parent selector — they are no longer treated as if they have no selector. This explorer shows exactly which declaration wins and why.

Presets:

CSS Nesting input (with bare declarations)

CSS to analyse

HTML target

/* Chrome 130: CSSNestedDeclarations rule */

/* Bare declaration ORDER matters */
.parent {
  color: red;         /* 1st: applied first, lower order */

  &:hover {
    font-size: 1.1em; /* nested rule */
  }

  color: blue;        /* 2nd: WINS — same specificity, later order */
}
/* Chrome 130: .parent gets color:blue (CSSNestedDeclarations) */

/* Before Chrome 130: the second color:red was sometimes ignored */
/* due to incorrect specificity treatment of bare declarations */

/* CSSNestedDeclarations in the CSSOM */
const sheet = document.styleSheets[0];
const rule  = sheet.cssRules[0]; // CSSStyleRule (.parent)
const rules = rule.cssRules;
// rules[0] = &:hover { }
// rules[1] = CSSNestedDeclarations { color: blue }  ← Chrome 130

see also