Signatur
Beschreibung
Die Eigenschaft selectorText des Interfaces CSSStyleRule liefert die Selektorliste einer Stilregel als String, also den Teil vor dem Block { … }. Weist man ihr einen neuen Wert zu, wird der Selektor der Regel live geändert. Der Browser wendet die Regel dann sofort auf die passenden Elemente an, ohne dass das Stylesheet neu geladen wird.
Der zurückgegebene Wert ist serialisiert. Der Browser normalisiert Leerzeichen und Kommas und schreibt Typselektoren manchmal klein. Aus h1,H2 , p wird zum Beispiel h1, h2, p. Deshalb sollte man den Wert nicht Zeichen für Zeichen mit dem Originalquelltext vergleichen.
Typische Einsatzfälle sind Werkzeuge, die Stylesheets untersuchen (z. B. alle Regeln für eine bestimmte Klasse finden), dynamische Themes oder das nachträgliche Anpassen von Regeln, die man mit CSSStyleSheet.insertRule() oder über Constructable Stylesheets angelegt hat. Bei verschachteltem CSS (CSS Nesting) enthält selectorText einer verschachtelten Regel den relativen Selektor, z. B. &:hover.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | Beim Setzen: eine gültige CSS-Selektorliste. Ist sie ungültig, wird die Zuweisung stillschweigend ignoriert und der alte Selektor bleibt erhalten. |
Rückgabewert
"ul > li.active".Beispiele
Selektoren aller Regeln eines Stylesheets auflisten
const sheet = new CSSStyleSheet();
sheet.replaceSync(`
h1,H2 , p { margin: 0; }
.btn:hover { color: red; }
`);
for (const rule of sheet.cssRules) {
if (rule instanceof CSSStyleRule) {
console.log(rule.selectorText);
}
}Selektor einer Regel zur Laufzeit ändern
const style = document.createElement('style');
style.textContent = '.highlight { background: yellow; }';
document.head.append(style);
const rule = style.sheet.cssRules[0];
// Regel gilt ab jetzt für .marked statt für .highlight
rule.selectorText = '.marked';
console.log(rule.cssText);Ungültige Selektoren werden ignoriert
const sheet = new CSSStyleSheet();
sheet.replaceSync('.card { padding: 1rem; }');
const rule = sheet.cssRules[0];
rule.selectorText = '.card[[invalid';
console.log(rule.selectorText); // unverändert
// Vorab prüfen, ob ein Selektor gültig ist
const isValid = (sel) => CSS.supports(`selector(${sel})`);
console.log(isValid('.card:has(img)'));Alle Regeln zu einer Klasse finden
const findRulesFor = (className) =>
[...document.styleSheets].flatMap((sheet) => {
try {
return [...sheet.cssRules];
} catch {
return []; // fremde Stylesheets ohne CORS überspringen
}
}).filter(
(rule) => rule instanceof CSSStyleRule &&
rule.selectorText.split(',').some((s) => s.includes(`.${className}`))
);
console.log(findRulesFor('btn').map((r) => r.selectorText));// Wichtig · Fallstricke
- Keine Fehlermeldung: Ungültige Selektoren lösen keine Exception aus, die Zuweisung wird einfach verworfen. Prüfe den Wert nach dem Setzen oder vorher mit
CSS.supports('selector(...)'). - Normalisierung: Der zurückgegebene String kann sich im Format vom Quelltext unterscheiden (Leerzeichen, Kleinschreibung, Anführungszeichen in Attributselektoren). Vergleiche am besten nur normalisierte Werte.
- CORS: Bei Stylesheets von fremden Origins ohne passende CORS-Header wirft schon der Zugriff auf
cssRuleseinenSecurityError. AnselectorTextkommt man dann gar nicht erst heran. - Das Aufteilen der Selektorliste mit
split(',')ist nur eine Näherung. Kommas innerhalb von:is(),:not()oder:has()werden dabei falsch getrennt. - Nur Stilregeln haben diese Eigenschaft.
@media,@keyframesusw. haben keinselectorText. Filtere deshalb mitinstanceof CSSStyleRule. - Das Lesen wird überall unterstützt. Das Setzen funktioniert in allen modernen Browsern. Verschachtelte Regeln (CSS Nesting) gibt es erst in neueren Browserversionen (ab etwa 2023).