HTML

Structure of content on the web

  • Web APIs

    Interfaces for building web applications

  • Learn
  • HTTP Observatory

    Scan a website for free

  • Web APIs
  • CSSStyleSheet()
  • Instance properties
    1. rules
  • Instance methods
    1. addRule()
    2. removeRule()
    3. CSS
    4. CSSGroupingRule
    5. CSSLayerBlockRule
    6. CSSPageDescriptors
    7. CSSRuleList
    8. CSSSupportsRule
    9. Screen
    10. 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.

      StyleSheet CSSStyleSheet

      A stylesheet consists of a collection of cssRules property.

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

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

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

      See the Obtaining a StyleSheet section for the various ways a CSSStyleSheet object can be obtained. A CSSStyleSheet object can also be directly constructed. The constructor, and the CSSStyleSheet.replaceSync() methods are newer additions to the specification, enabling Constructable Stylesheets.

    • Constructor

    CSSStyleSheet()

    Creates a new CSSStyleSheet object.

    Instance properties

    Inherits properties from its parent, StyleSheet.

    CSSStyleSheet.cssRules Read only

    Returns a live CSSRule objects that comprise the stylesheet.

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

    CSSStyleSheet.ownerRule Read only

    If this stylesheet is imported into the document using an CSSImportRule; otherwise, this property's value is null.

    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 a Promise that resolves with the updated CSSStyleSheet.

    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.

    rules Read only

    The rules property is functionally identical to the standard CSSRuleList 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()

    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()

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

    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
    <link> elements in the document Yes .ownerNode HTMLStyleElement,
    or SVGStyleElement     		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

    Specifications

    Specification
    CSS Object Model (CSSOM)
    # the-cssstylesheet-interface

    Browser compatibility

    BCD tables only load in the browser

    See also