CSSRule

The CSSRule interface represents a single CSS rule. There are several types of rules which inherit properties from CSSRule.

Properties common to all CSSRule instances

The CSSRule 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.cssText

Represents 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.

CSSRule.parentRule Read only

Returns the containing rule, otherwise null. E.g. if this rule is a style rule inside an @media block, the parent rule would be that CSSMediaRule.

CSSRule.parentStyleSheet Read only

Returns the CSSStyleSheet object for the style sheet that contains this rule

CSSRule.type Read only

Returns one of the Type constants to determine which type of rule is represented.

Examples

References to a CSSRule may be obtained by looking at a CSSStyleSheet's cssRules list.

let myRules = document.styleSheets[0].cssRules; // Returns a CSSRuleList
console.log(myRules);

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
CSSRule
1
12
1
9
≤12.1
1
1
18
4
≤12.1
1
1.0
cssText
1
12
1
9
The property normalizes rules and does not return the original verbatim rule text. For example, border-width: 1px; border-style:solid; border-color:white; returns border: 1px solid white;.
≤12.1
1
1
18
4
≤12.1
1
1.0
parentRule
1
12
1
9
≤12.1
1
1
18
4
≤12.1
1
1.0
parentStyleSheet
1
12
1
9
≤12.1
1
1
18
4
≤12.1
1
1.0
type
1
12
1
9
≤12.1
1
1
18
4
≤12.1
1
1.0

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CSSRule