CSSRuleList
A CSSRuleList
represents an ordered collection of read-only CSSRule
objects.
While the CSSRuleList
object is read-only, and cannot be directly modified, it is considered a live
object, as the content can change over time.
To edit the underlying rules returned by CSSRule
objects, use CSSStyleSheet.insertRule()
and CSSStyleSheet.deleteRule()
, which are methods of CSSStyleSheet
.
The interface has no constructor. An instance of CSSRuleList
is returned by CSSStyleSheet.cssRules
and CSSKeyframesRule.cssRules
.
Note: This interface was an attempt to create an unmodifiable list and only continues to be supported to not break code that's already using it. Modern APIs use types that wrap around ECMAScript array types instead, so you can treat them like ECMAScript arrays, and at the same time impose additional semantics on their usage (such as making their items read-only).
Instance properties
CSSRuleList.length
Read only-
Returns an integer representing the number of
CSSRule
objects in the collection.
Instance methods
CSSRuleList.item()
-
Gets a single
CSSRule
.
Examples
In the following example there is a stylesheet with three rules. Using CSSStyleSheet.cssRules
returns a CSSRuleList
, which is printed to the console.
The number of rules in the list is printed to the console using CSSRuleList.length
. The first CSSRule
can be returned by using 0
as the parameter for CSSRuleList.item
, in the example this will return the rules set for the body
selector.
CSS
css
body {
font-family: system-ui, -apple-system, sans-serif;
margin: 2em;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
}
.container > * {
background-color: #3740ff;
color: #fff;
}
JavaScript
js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules);
console.log(myRules.length);
console.log(myRules[0]);
Specifications
Specification |
---|
CSS Object Model (CSSOM) # the-cssrulelist-interface |
Browser compatibility
BCD tables only load in the browser