Signatur
Beschreibung
Mit CSS-Nesting können in einer Stilregel Deklarationen und verschachtelte Regeln (z. B. &:hover { … } oder @media { … }) gemischt vorkommen. Deklarationen, die nach einer verschachtelten Regel stehen oder direkt in einer verschachtelten At-Regel wie @media liegen, fasst das CSSOM in einem eigenen CSSNestedDeclarations-Objekt zusammen. Die Eigenschaft style gibt dir Zugriff auf genau diese Deklarationen.
Der Rückgabewert ist ein CSSStyleDeclaration-Objekt (laut Spezifikation CSSStyleProperties). Du kannst es genauso nutzen wie CSSStyleRule.style oder element.style: Werte mit getPropertyValue() lesen, mit setProperty() ändern oder mit removeProperty() entfernen. Die Änderungen wirken sich sofort auf das zugehörige Stylesheet aus.
Schreibgeschützt ist nur die Referenz selbst. Das zurückgegebene Objekt lässt sich ändern. Einsetzen wirst du die Eigenschaft vor allem in Werkzeugen, die Stylesheets untersuchen oder umschreiben, etwa in Devtools, CSS-in-JS-Bibliotheken oder Theme-Editoren, die mit verschachteltem CSS arbeiten.
Rückgabewert
Beispiele
Deklarationen nach einer verschachtelten Regel auslesen
const sheet = new CSSStyleSheet();
sheet.replaceSync(`
.card {
color: red;
&:hover { color: blue; }
padding: 1rem;
}
`);
const cardRule = sheet.cssRules[0]; // CSSStyleRule
console.log(cardRule.style.color); // Deklaration vor der Verschachtelung
const nested = cardRule.cssRules[1]; // nach &:hover
console.log(nested.constructor.name);
console.log(nested.style.padding);Verschachtelte Deklarationen per setProperty ändern
const sheet = new CSSStyleSheet();
sheet.replaceSync(`.btn { &:focus { outline: 2px solid; } margin: 0; }`);
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
const nested = sheet.cssRules[0].cssRules[1];
nested.style.setProperty('margin', '0.5rem');
nested.style.setProperty('cursor', 'pointer');
console.log(nested.style.cssText);Deklarationen in einer verschachtelten @media-Regel
const sheet = new CSSStyleSheet();
sheet.replaceSync(`
.layout {
display: block;
@media (min-width: 800px) {
display: grid;
}
}
`);
const mediaRule = sheet.cssRules[0].cssRules[0]; // CSSMediaRule
const decls = mediaRule.cssRules[0];
if ('CSSNestedDeclarations' in window && decls instanceof CSSNestedDeclarations) {
console.log(decls.style.getPropertyValue('display'));
} else {
// Ältere Browser: Deklarationen stecken in einer CSSStyleRule mit Selektor "&"
console.log(decls.selectorText, decls.style.display);
}// Wichtig · Fallstricke
- Browser-Kompatibilität:
CSSNestedDeclarationsist neu (Chrome/Edge 130, Firefox 132, Safari 18.2). Ältere Browser mit Nesting-Unterstützung legen solche Deklarationen stattdessen in eine impliziteCSSStyleRulemit dem Selektor&. Oder sie ziehen Deklarationen, die nach verschachtelten Regeln stehen, nach oben in den Hauptblock, was die Kaskade verändert. Prüfe die Unterstützung vorher mit'CSSNestedDeclarations' in window. - Deklarationen vor der ersten verschachtelten Regel stehen nicht in einem
CSSNestedDeclarations-Objekt, sondern direkt inCSSStyleRule.style. - Die Eigenschaft ist schreibgeschützt, eine Zuweisung wie
nested.style = '…'ersetzt also nicht das Objekt. Laut Spezifikation wird sie ancssTextweitergereicht. Klarer ist es,style.cssTextodersetProperty()direkt zu verwenden. - Die Werte werden normalisiert zurückgegeben: Kurzschreibweisen können anders serialisiert werden, als sie im Quelltext stehen.
- Auf
cssRulesfremder Stylesheets (anderer Ursprung ohne CORS) darfst du nicht zugreifen. Der Zugriff löst dann einenSecurityErroraus.