CSSStyleRule

Baseline Widely available *

This feature is well established and works across many devices and browser versions. Its been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Learn more
See full compatibility

The CSSStyleRule interface represents a single CSS style rule.

CSSRule CSSGroupingRule CSSStyleRule

Instance properties

Inherits properties from its ancestors CSSGroupingRule and CSSRule.

CSSStyleRule.selectorText: Returns the textual representation of the selector for this rule, e.g., "h1, h2".
CSSStyleRule.style Read only: Returns the CSSStyleProperties object for the rule, which represents its styles.
CSSStyleRule.styleMap Read only: Returns a StylePropertyMap object which provides access to the rule's property-value pairs.

Instance methods

Inherits methods from its ancestors CSSGroupingRule and CSSRule.

Examples

Getting a style rule

The CSS below defines the style rule for the h1 selector, which is represented in code by a CSSStyleRule instance.

css

h1 {
  color: pink;
}

Assuming the above style rule is the first rule in the document, it will be the first CSSRule returned by document.styleSheets[0].cssRules. myRules[0].style returns a CSSStyleProperties object representing the declarations defined for h1.

let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0]); // a CSSStyleRule representing the h1.

Specifications

Specification
CSS Object Model (CSSOM) # the-cssstylerule-interface

Browser compatibility

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on Oct 14, 2025 by MDN contributors.

View this page on GitHub Report a problem with this content