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.lengthRead 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

See also