Signatur
Beschreibung
Die Eigenschaft parentRule einer CSSStyleDeclaration verweist auf die CSS-Regel, der der Deklarationsblock gehört. Das ist meist eine CSSStyleRule, also z. B. die Regel .button { color: red; }. Es kann aber auch eine andere Regel mit Deklarationen sein, etwa CSSFontFaceRule, CSSPageRule oder CSSKeyframeRule.
Mit dieser Eigenschaft kommt man von einem Deklarationsblock zurück zur zugehörigen Regel. Von dort erreicht man z. B. den Selektor (selectorText), die umgebende Regel (parentRule der Regel, etwa bei @media) oder das Stylesheet (parentStyleSheet). Das hilft bei Werkzeugen, die Stylesheets untersuchen oder verändern, etwa CSS-Debugger, Theme-Editoren oder Linter im Browser.
Wichtig: Nicht jeder Deklarationsblock hat eine übergeordnete Regel. Bei Inline-Stilen über element.style und bei berechneten Stilen aus getComputedStyle() ist parentRule immer null.
Rückgabewert
CSSStyleRule, CSSFontFaceRule, CSSKeyframeRule) oder null bei Inline-Stilen und berechneten Stilen.Beispiele
Vom Deklarationsblock zurück zum Selektor
const sheet = new CSSStyleSheet();
sheet.replaceSync('.card { padding: 1rem; color: navy; }');
const declaration = sheet.cssRules[0].style;
const rule = declaration.parentRule;
console.log(rule === sheet.cssRules[0]);
console.log(rule.selectorText);
console.log(rule.parentStyleSheet === sheet);Inline- und berechnete Stile haben keine Regel
const el = document.createElement('div');
el.style.color = 'red';
document.body.append(el);
console.log(el.style.parentRule);
console.log(getComputedStyle(el).parentRule);Hilfsfunktion: Herkunft einer Deklaration beschreiben
const describeOrigin = (decl) => {
const rule = decl.parentRule;
if (!rule) return 'Inline- oder berechneter Stil';
const context = rule.parentRule instanceof CSSMediaRule
? ` innerhalb @media ${rule.parentRule.conditionText}`
: '';
return `${rule.selectorText ?? rule.constructor.name}${context}`;
};
const sheet = new CSSStyleSheet();
sheet.replaceSync('@media (max-width: 600px) { .nav { display: none; } }');
const inner = sheet.cssRules[0].cssRules[0];
console.log(describeOrigin(inner.style));
console.log(describeOrigin(document.body.style));// Wichtig · Fallstricke
- Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird ignoriert und wirft im Strict Mode einen
TypeError. - Bei
element.styleundgetComputedStyle()ist der Wert immernull. Vor dem Zugriff aufselectorText& Co. immer aufnullprüfen, z. B. mit Optional Chaining (decl.parentRule?.selectorText). - Die gelieferte Regel ist nicht immer eine
CSSStyleRule. Bei@font-face,@pageoder Keyframes gibt es keinselectorText. - Bei Stylesheets von fremden Ursprüngen (Cross-Origin ohne CORS) wirft schon der Zugriff auf
cssRuleseinenSecurityError. Man kommt dann gar nicht erst an die Deklarationen. - Konstruierbare Stylesheets (
new CSSStyleSheet(),replaceSync) aus den Beispielen gibt es in allen aktuellen Browsern, in Safari erst ab Version 16.4. Die EigenschaftparentRuleselbst wird überall unterstützt.