CSSStyleRule

{{ APIRef("CSSOM") }} 

The CSSStyleRule interface represents a single CSS style rule.

{{InheritanceDiagram}} 

Instance properties

Inherits properties from its ancestors {{domxref("CSSGroupingRule")}}  and {{domxref("CSSRule")}} .

• {{domxref("CSSStyleRule.selectorText")}} 
  • : Returns the textual representation of the selector for this rule, e.g. "h1, h2".
• {{domxref("CSSStyleRule.style")}}  {{ReadOnlyInline}} 
  • : Returns the {{domxref("CSSStyleDeclaration")}}  object for the rule.
• {{domxref("CSSStyleRule.styleMap")}}  {{ReadOnlyInline}} 
  • : Returns a {{domxref('StylePropertyMap')}}  object which provides access to the rule’s property-value pairs.

Instance methods

Inherits methods from its ancestors {{domxref("CSSGroupingRule")}}  and {{domxref("CSSRule")}} .

Examples

The CSS includes one style rule. This will be the first {{domxref("CSSRule")}}  returned by document.styleSheets[0].cssRules. myRules[0] therefore returns a CSSStyleRule object representing the rule defined for h1.

h1 {
  color: pink;
}

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

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}}