CSSRule.parentStyleSheet — Eigenschaft · JavaScript-Referenz

Signatur

CSSRule.parentStyleSheet

Beschreibung

Die schreibgeschützte Eigenschaft parentStyleSheet des Interfaces CSSRule verweist auf das CSSStyleSheet-Objekt, zu dem die Regel gehört. Das gilt auch für verschachtelte Regeln, zum Beispiel innerhalb von @media- oder @supports-Blöcken: Sie verweisen immer auf das Stylesheet ganz oben, nicht auf die umschließende Regel. Die umschließende Regel liefert CSSRule.parentRule.

Nützlich ist die Eigenschaft vor allem, wenn man nur eine Regel in der Hand hat, etwa aus einer Suche über mehrere Stylesheets, und von dort aus weiterarbeiten möchte: die Herkunft über href oder ownerNode ermitteln, die Regel mit deleteRule() entfernen oder neue Regeln im selben Stylesheet einfügen.

Der Wert ist null, wenn die Regel keinem Stylesheet (mehr) angehört, zum Beispiel nachdem sie per deleteRule() entfernt wurde.

Rückgabewert

Typ

CSSStyleSheet | null

Beschreibung

Das Stylesheet, das die Regel enthält, oder null, wenn die Regel zu keinem Stylesheet gehört.

Beispiele

Herkunft einer Regel ermitteln

const sheet = document.styleSheets[0];
const rule = sheet.cssRules[0];

console.log(rule.parentStyleSheet === sheet);
console.log(rule.parentStyleSheet.href ?? 'Inline-<style>');
console.log(rule.parentStyleSheet.ownerNode.nodeName);

true Inline-<style> STYLE

Regel für einen Selektor suchen und entfernen

const findRule = (selector) => {
  for (const sheet of document.styleSheets) {
    let rules;
    try {
      rules = sheet.cssRules; // löst bei fremden Origins einen SecurityError aus
    } catch {
      continue;
    }
    for (const rule of rules) {
      if (rule.selectorText === selector) return rule;
    }
  }
  return null;
};

const rule = findRule('.banner');
if (rule) {
  const sheet = rule.parentStyleSheet;
  const index = [...sheet.cssRules].indexOf(rule);
  sheet.deleteRule(index);
  console.log('Entfernt aus:', sheet.href ?? 'Inline-Stylesheet');
  console.log(rule.parentStyleSheet); // Regel ist jetzt vom Stylesheet getrennt
}

Entfernt aus: Inline-Stylesheet null

Verschachtelte Regel in @media

const sheet = new CSSStyleSheet();
sheet.replaceSync('@media (min-width: 600px) { .card { padding: 2rem; } }');

const mediaRule = sheet.cssRules[0];
const inner = mediaRule.cssRules[0];

console.log(inner.parentStyleSheet === sheet);  // oberstes Stylesheet
console.log(inner.parentRule === mediaRule);    // umschließende Regel

true true

// Wichtig · Fallstricke

Nur lesbar: Eine Zuweisung wird ignoriert (im Strict Mode wirft sie einen TypeError). Eine Regel lässt sich nicht in ein anderes Stylesheet verschieben. Stattdessen cssText kopieren und mit insertRule() neu einfügen.
Nicht mit parentRule verwechseln: parentStyleSheet liefert immer das Stylesheet, parentRule die direkt umschließende Gruppenregel oder null.
Getrennte Regeln: Nach deleteRule() oder dem Ersetzen per replace()/replaceSync() kann der Wert null sein. Vor dem Zugriff darauf prüfen, etwa mit rule.parentStyleSheet?.href.
Cross-Origin: Bei Stylesheets von fremden Origins ohne CORS wirft schon der Zugriff auf cssRules einen SecurityError. Man kommt also gar nicht erst an die Regeln.
Bei konstruierbaren Stylesheets (new CSSStyleSheet()) ist ownerNode des übergeordneten Stylesheets null.
Wird von allen modernen Browsern unterstützt.

Siehe auch

CSSRule.cssText CSSRule.parentRule CSSRule.type StyleSheet.parentStyleSheet CSSImportRule.styleSheet