CSSStyleRule
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
TheCSSStyleRule interface represents a single CSS style rule.
Instance properties
Inherits properties from its ancestorsCSSGroupingRule andCSSRule.
CSSStyleRule.selectorTextReturns the textual representation of the selector for this rule, e.g.,
"h1, h2".CSSStyleRule.styleRead onlyReturns the
CSSStylePropertiesobject for the rule, which represents its styles.CSSStyleRule.styleMapRead onlyReturns a
StylePropertyMapobject which provides access to the rule's property-value pairs.
Instance methods
Inherits methods from its ancestorsCSSGroupingRule andCSSRule.
Examples
Getting a style rule
The CSS below defines the style rule for theh1 selector, which is represented in code by aCSSStyleRule instance.
h1 { color: pink;}Assuming the above style rule is the first rule in the document, it will be the firstCSSRule returned bydocument.styleSheets[0].cssRules.myRules[0].style returns aCSSStyleProperties object representing the declarations defined forh1.
let myRules = document.styleSheets[0].cssRules;console.log(myRules[0]); // a CSSStyleRule representing the h1.Specifications
| Specification |
|---|
| CSS Object Model (CSSOM) # the-cssstylerule-interface |