CSSStyleSheet

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

TheCSSStyleSheet interface represents a singleCSS 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 ofCSSRule objects representing each of the rules in the stylesheet. The rules are contained in aCSSRuleList, which can be obtained from the stylesheet'scssRules property.

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

css

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

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

See theObtaining a StyleSheet section for the various ways aCSSStyleSheet object can be obtained. ACSSStyleSheet object can also be directly constructed. The constructor, and theCSSStyleSheet.replace(), andCSSStyleSheet.replaceSync() methods are newer additions to the specification, enablingConstructable Stylesheets.

Constructor

CSSStyleSheet(): Creates a newCSSStyleSheet object.

Instance properties

Inherits properties from its parent,StyleSheet.

CSSStyleSheet.cssRulesRead only: Returns a liveCSSRuleList which maintains an up-to-date list of theCSSRule objects that comprise the stylesheet.
Note:In some browsers, if a stylesheet is loaded from a different domain, accessingcssRules results in aSecurityError.
CSSStyleSheet.ownerRuleRead only: If this stylesheet is imported into the document using an@import rule, theownerRule property returns the correspondingCSSImportRule; otherwise, this property's value isnull.

Instance methods

Inherits methods from its parent,StyleSheet.

CSSStyleSheet.deleteRule(): Deletes the rule at the specified index into the stylesheet's rule list.
CSSStyleSheet.insertRule(): Inserts a new rule at the specified position in the stylesheet, given the textual representation of the rule.
CSSStyleSheet.replace(): Asynchronously replaces the content of the stylesheet and returns aPromise that resolves with the updatedCSSStyleSheet.
CSSStyleSheet.replaceSync(): Synchronously replaces the content of the stylesheet.

Legacy properties

These properties are legacy properties as introduced by Microsoft; these are maintained for compatibility with existing sites.

rulesRead onlyDeprecated: Therules property is functionally identical to the standard cssRules property; it returns a liveCSSRuleList which maintains an up-to-date list of all of the rules in the style sheet.

Legacy methods

These methods are legacy methods as introduced by Microsoft; these are maintained for compatibility with existing sites.

addRule()Deprecated

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 takes the textual representation of the entire rule as a single string.

removeRule()Deprecated

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

Obtaining a StyleSheet

A stylesheet is associated with at most oneDocument, which it applies to (unlessdisabled). A list ofCSSStyleSheet objects for a given document can be obtained using theDocument.styleSheets property. A specific style sheet can also be accessed from itsowner object (Node orCSSImportRule), if any.

ACSSStyleSheet object is created and inserted into the document'sDocument.styleSheets list automatically by the browser, when a stylesheet is loaded for a 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`	`HTMLLinkElement.sheet`, `HTMLStyleElement.sheet`, 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`
JavaScript`import ... with { type: "css" }`	No	N/A	N/A	N/A
HTTP Link Header	Yes	N/A	N/A	N/A
User agent (default) style sheets	No	N/A	N/A	N/A