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.
The CSSStyleRule interface represents a single CSS style rule.
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.styleRead only-
Returns the
CSSStylePropertiesobject for the rule, which represents its styles. CSSStyleRule.styleMapRead only-
Returns a
StylePropertyMapobject 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
| Specification |
|---|
| CSS Object Model (CSSOM) # the-cssstylerule-interface |
Browser compatibility
Loading...