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.
css
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.
js
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
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
CSSStyleRule
|
|
|
|
|
|
|
|
|
|
|
|
|
cssRules
|
|
|
|
|
|
|
|
|
|
|
|
|
deleteRule
|
|
|
|
|
|
|
|
|
|
|
|
|
insertRule
|
|
|
|
|
|
|
|
|
|
|
|
|
selectorText
|
|
|
|
|
|
|
|
|
|
|
|
|
style
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Returns
CSSStyleProperties (not CSSStyleDeclaration)
|
|
|
|
|
|
|
|
|
|
|
|
|
styleMap
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- See implementation notes.