CSSRule
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.
TheCSSRule interface represents a single CSS rule. There are several types of rules which inherit properties fromCSSRule.
CSSGroupingRuleCSSStyleRuleCSSImportRuleCSSMediaRuleCSSFontFaceRuleCSSFunctionDeclarationsCSSPageRuleCSSNamespaceRuleCSSKeyframesRuleCSSKeyframeRuleCSSCounterStyleRuleCSSSupportsRuleCSSFontFeatureValuesRuleCSSFontPaletteValuesRuleCSSLayerBlockRuleCSSLayerStatementRuleCSSPropertyRuleCSSNestedDeclarations
Instance properties
TheCSSRule interface specifies the properties common to all rules, while properties unique to specific rule types are specified in the more specialized interfaces for those rules' respective types.
CSSRule.cssTextRepresents the textual representation of the rule, e.g.,
"h1,h2 { font-size: 16pt }"or"@import 'url'". To access or modify parts of the rule (e.g., the value of "font-size" in the example) use the properties on the specialized interface for the rule's type (see above).CSSRule.parentRuleRead onlyReturns the containing rule, otherwise
null. E.g. if this rule is a style rule inside an@mediablock, the parent rule would be thatCSSMediaRule.CSSRule.parentStyleSheetRead onlyReturns the
CSSStyleSheetobject for the style sheet that contains this ruleCSSRule.typeRead onlyDeprecatedReturns one of the Type constants to determine which type of rule is represented.
Examples
References to aCSSRule may be obtained by looking at aCSSStyleSheet'scssRules list.
let myRules = document.styleSheets[0].cssRules; // Returns a CSSRuleListconsole.log(myRules);Specifications
| Specification |
|---|
| CSS Object Model (CSSOM) # the-cssrule-interface |