CSSRule.parentRule — Eigenschaft · JavaScript-Referenz

Signatur

CSSRule.parentRule

Beschreibung

Die schreibgeschützte Eigenschaft parentRule des Interfaces CSSRule verweist auf die Regel, die die aktuelle Regel direkt enthält. Das sind typischerweise gruppierende At-Regeln wie @media, @supports, @container oder @layer (alle vom Typ CSSGroupingRule). Bei verschachteltem CSS (CSS Nesting) kann es auch eine CSSStyleRule sein. Bei @keyframes ist die übergeordnete Regel eines CSSKeyframeRule die zugehörige CSSKeyframesRule.

Steht eine Regel direkt auf der obersten Ebene eines Stylesheets, ist parentRule null. Das zugehörige Stylesheet selbst bekommt man in diesem Fall über CSSRule.parentStyleSheet.

Nützlich ist die Eigenschaft, wenn man in der CSSOM-Struktur von einer Regel „nach oben“ gehen will. Beispiele: herausfinden, ob eine Style-Regel nur unter einer bestimmten Media Query gilt, den kompletten Kontext einer Regel für Debug-Werkzeuge aufbauen oder Regeln innerhalb einer bestimmten At-Regel gezielt bearbeiten.

Rückgabewert

Typ

CSSRule | null

Beschreibung

Die direkt übergeordnete Regel, z. B. eine CSSMediaRule, CSSSupportsRule, CSSLayerBlockRule, CSSKeyframesRule oder CSSStyleRule (bei Nesting). Steht die Regel auf oberster Ebene, ist der Wert null.

Beispiele

Übergeordnete @media-Regel ermitteln

const style = document.createElement('style');
style.textContent = `
  body { margin: 0; }
  @media (min-width: 600px) {
    .card { padding: 2rem; }
  }
`;
document.head.append(style);

const sheet = style.sheet;
const topRule = sheet.cssRules[0];
const mediaRule = sheet.cssRules[1];
const innerRule = mediaRule.cssRules[0];

console.log(topRule.parentRule);
console.log(innerRule.parentRule === mediaRule);
console.log(innerRule.parentRule.conditionText);

null true (min-width: 600px)

Kompletten Verschachtelungspfad einer Regel ausgeben

const style = document.createElement('style');
style.textContent = `
  @supports (display: grid) {
    @media print {
      .grid { display: grid; }
    }
  }
`;
document.head.append(style);

const describe = (rule) => {
  const path = [];
  for (let r = rule.parentRule; r; r = r.parentRule) {
    path.unshift(`${r.constructor.name}(${r.conditionText ?? ''})`);
  }
  return path.join(' > ') || '(oberste Ebene)';
};

const inner = style.sheet.cssRules[0].cssRules[0].cssRules[0];
console.log(inner.selectorText, '→', describe(inner));

.grid → CSSSupportsRule(display: grid) > CSSMediaRule(print)

Keyframe-Regel und ihre @keyframes-Regel

const style = document.createElement('style');
style.textContent = `
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
`;
document.head.append(style);

const keyframes = style.sheet.cssRules[0];
const fromFrame = keyframes.cssRules[0];

console.log(fromFrame.keyText);
console.log(fromFrame.parentRule.name);

0% fade

// Wichtig · Fallstricke

Schreibgeschützt: Wer parentRule einen Wert zuweist, ändert nichts. Um eine Regel zu verschieben, entfernt man sie mit deleteRule() und fügt sie mit insertRule() an der neuen Stelle wieder ein.
parentRule liefert nur die direkt übergeordnete Regel. Für tiefere Verschachtelungen läuft man die Kette in einer Schleife ab, bis null zurückkommt.
Regeln, die über @import geladen werden, liegen in einem eigenen Stylesheet. Deren oberste Regeln haben parentRule === null. Die CSSImportRule erreicht man stattdessen über parentStyleSheet.ownerRule.
Bei Stylesheets von einer anderen Herkunft ohne CORS-Freigabe wirft der Zugriff auf cssRules einen SecurityError. In diesem Fall kommt man gar nicht erst an die Regeln heran.
Dass bei CSS Nesting eine CSSStyleRule als parentRule zurückkommt, klappt nur in aktuellen Browsern (etwa ab 2023). Die Eigenschaft selbst wird schon lange von allen Browsern unterstützt.
Wird eine Regel aus ihrem Elternelement entfernt, ist ihr parentRule danach null.

Siehe auch

CSSRule CSSRule.parentStyleSheet CSSGroupingRule CSSMediaRule CSSStyleSheet.cssRules CSSStyleSheet.insertRule() CSSPageRule.selectorText