CSSStyleRule

The CSSStyleRule interface represents a single CSS style rule.

Instance properties

Inherits properties from its ancestors CSSGroupingRule and CSSRule.

• selectorText
  • : Returns the textual representation of the selector for this rule, e.g., "h1, h2".
• style Read only
  • : Returns the CSSStyleProperties object for the rule, which represents its styles.
• 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.

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

Browser compatibility