Instance properties
CSSRuleList.lengthRead only-
Returns an integer representing the number of
CSSRuleobjects 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: white;
}
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 |