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".
- : Returns the textual representation of the selector for this rule, e.g.,
{{domxref("CSSStyleRule.style")}}{{ReadOnlyInline}}- : Returns the
{{domxref("CSSStyleProperties")}}object for the rule, which represents its styles.
- : Returns the
{{domxref("CSSStyleRule.styleMap")}}{{ReadOnlyInline}}- : Returns a
{{domxref('StylePropertyMap')}}object which provides access to the rule’s property-value pairs.
- : Returns a
Instance methods
Inherits methods from its ancestors {{domxref("CSSGroupingRule")}} and {{domxref("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 {{domxref("CSSRule")}} returned by document.styleSheets[0].cssRules.
myRules[0].style returns a {{domxref("CSSStyleProperties")}} object representing the declarations defined for h1.
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0]); // a CSSStyleRule representing the h1.
Specifications
{{Specifications}}
Browser compatibility
{{Compat}}