Web/API/CSSStyleSheet

The CSSStyleSheet interface represents a single CSS stylesheet, and lets you inspect and modify the list of rules contained in the stylesheet. It inherits properties and methods from its parent, StyleSheet.

A stylesheet consists of a collection of CSSRule objects representing each of the rules in the stylesheet. The rules are contained in a CSSRuleList, which can be obtained from the stylesheet's cssRules property.

For example, one rule might be a CSSStyleRule object containing a style such as:

h1, h2 {
  font-size: 16pt;
}

Another rule might be an at-rule such as @import or @media, and so forth.

See the Notes section for the various ways a CSSStyleSheet object can be obtained.

Properties

Inherits properties from its parent, StyleSheet.

cssRules Read only

Returns a live CSSRuleList which maintains an up-to-date list of the CSSRule objects that comprise the stylesheet.

This is normally used to access individual rules like this:

styleSheet.cssRules[i] // where i = 0..cssRules.length-1

To add or remove items in cssRules, use the CSSStyleSheet's insertRule() and deleteRule() methods.

ownerRule Read only

If this stylesheet is imported into the document using an @import rule, the ownerRule property returns the corresponding CSSImportRule; otherwise, this property's value is null.

Methods

Inherits methods from its parent, StyleSheet.

deleteRule(): Deletes the rule at the specified index into the stylesheet's rule list.
insertRule(): Inserts a new rule at the specified position in the stylesheet, given the textual representation of the rule.

Legacy properties

These properties are legacy properties first introduced by Microsoft long ago; they shouldn't be used but are not likely to be removed anytime soon.

rules Read only: The rules property is functionally identical to the standard cssRules property; it returns a live CSSRuleList which maintains an up-to-date list of all of the rules in the style sheet.

Legacy methods

These methods are legacy methods first introduced by Microsoft; they should not be used if they can be avoided, but are not in danger of being removed anytime soon.

addRule()

Adds a new rule to the stylesheet given the selector to which the style applies and the style block to apply to the matching elements.

This differs from insertRule(), which simply takes the textual representation of the entire rule as a single string.

removeRule()

Functionally identical to deleteRule(); removes the rule at the specified index from the stylesheet's rule list.

Notes

In some browsers, if a stylesheet is loaded from a different domain, accessing cssRules results in SecurityError.

A stylesheet is associated with at most one Document, which it applies to (unless disabled). A list of CSSStyleSheet objects for a given document can be obtained using the document.styleSheets property. A specific style sheet can also be accessed from its owner object (Node or CSSImportRule), if any.

A CSSStyleSheet object is created and inserted into the document's Document.styleSheets list automatically by the browser, when a stylesheet is loaded for a document. As the stylesheet list cannot be modified directly, there's no useful way to create a new CSSStyleSheet object manually (although Constructable Stylesheet Objects is coming to the web platform soon and is already supported in Blink). To create a new stylesheet, insert a <style> or <link> element into the document.

A (possibly incomplete) list of ways a stylesheet can be associated with a document follows:

Reason for the style sheet to be associated with the document	Appears in `document. styleSheets` list	Getting the owner element/rule given the style sheet object	The interface for the owner object	Getting the CSSStyleSheet object from the owner
`<style>` and `<link>` elements in the document	Yes	`.ownerNode`	`HTMLLinkElement`, `HTMLStyleElement`, or `SVGStyleElement`	`.sheet`
CSS `@import` rule in other style sheets applied to the document	Yes	`.ownerRule`	`CSSImportRule`	`.styleSheet`
`<?xml-stylesheet ?>` processing instruction in the (non-HTML) document	Yes	`.ownerNode`	`ProcessingInstruction`	`.sheet`
HTTP Link Header	Yes	N/A	N/A	N/A
User agent (default) style sheets	No	N/A	N/A	N/A

Specifications

Specification	Status	Comment
CSS Object Model (CSSOM)The definition of 'CSSStyleSheet' in that specification.	Working Draft
Document Object Model (DOM) Level 2 Style SpecificationThe definition of 'CSSStyleSheet' in that specification.	Obsolete	Initial definition

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`CSSStyleSheet`	Chrome Full support Yes	Edge Full support 12	Firefox Full support 1	IE Full support 9	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`addRule()` Deprecated'	Chrome Full support Yes	Edge Full support 12	Firefox Full support 68	IE Full support 9	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 68	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`cssRules`	Chrome Full support Yes	Edge Full support 12	Firefox Full support 1	IE Full support 9	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`deleteRule()`	Chrome Full support Yes	Edge Full support 12	Firefox Full support 1	IE Full support 9	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`insertRule()`	Chrome Full support Yes	Edge Full support 12	Firefox Full support 1	IE Full support 9	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`ownerRule`	Chrome Full support Yes	Edge Full support 12	Firefox Full support 1	IE Full support 9	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`removeRule()` Deprecated'	Chrome Full support Yes	Edge Full support 12	Firefox Full support 68	IE Full support 9	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 68	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`rules` Deprecated'	Chrome Full support Yes	Edge Full support 12	Firefox Full support 68	IE Full support 9	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 68	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes

Legend

Full support: Full support
Deprecated. Not for use in new websites.': Deprecated. Not for use in new websites.