CSSStyleSheet: cssRules property
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The read-only CSSStyleSheet property
cssRules returns a live CSSRuleList which
provides a real-time, up-to-date list of every CSS rule which comprises the
stylesheet. Each item in the list is a CSSRule defining a single
rule.
Value
A live-updating CSSRuleList containing each of the CSS rules making up
the stylesheet. Each entry in the rule list is a CSSRule object
describing one rule making up the stylesheet.
Examples
Individual rules within the stylesheet can then be accessed by index:
const ruleList = document.styleSheets[0].cssRules;
for (let i = 0; i < ruleList.length; i++) {
processRule(ruleList[i]);
}
Rules can also be accessed using for...of:
const ruleList = document.styleSheets[0].cssRules;
for (const rule of ruleList) {
processRule(rule);
}
However, because CSSRule is not a proper array, you can't use
forEach().
Specifications
| Specification |
|---|
| CSS Object Model (CSSOM) # dom-cssstylesheet-cssrules |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
cssRules
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support