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
.
Properties
CSSRuleList.length
Read only-
Returns an integer representing the number of
CSSRule
objects in the collection.
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
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
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