In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > objects > cssRules

cssRules collection

Browser support:

9

Represents a collection of CSS rules in a styleSheet or media rule.

The rules in the collection are sorted in source code order.

CSS rules can be accessed differently in different browsers:

The cssRules collection provides access to both style rules and at-rules in all modern browsers. Unfortunately, Internet Explorer only supports the cssRules collection from version 9.
In Internet Explorer before version 9 (and in newer ones as well), the rules collection provides similar functionality to the cssRules collection. The rules collection does not contain the at-rules only style rules. The only way to access to an at-rule is to use the pages collection. It represents a collection of @page at-rules in a styleSheet. The other at-rules cannot be accessed in Internet Explorer before version 9.
Note: the imports collection provides access to the imported stylesheets in Internet Explorer. It represents a collection of stylesheets, not @import at-rules.

The cssRules collection always contains the style rules, but some kinds of at-rules are not always represented in all browsers:

In Opera, Google Chrome and Safari from version 5, the cssRules collection contains all at-rules.
In Safari before version 5 and Firefox from version 3.5, the cssRules collection contains all at-rules, except the @page at-rules.
In Firefox before version 3.5, the cssRules collection contains all at-rules, except the @font-face and @page at-rules.
In Internet Explorer, the cssRules collection contains all at-rules, except the @charset at-rules.

Each item in the cssRules collection represents a single CSS rule. Different rule types are represented by different rule objects. These rule objects are: CSSCharsetRule, CSSFontFaceRule, CSSImportRule, CSSMediaRule, CSSPageRule and CSSStyleRule.

Note: In Google Chrome and Safari, the rules property of the styleSheet object is supported, but it refers to the cssRules, not the rules collection. If you need to use both cssRules and rules collections in your code (if you need implement different solution in Internet Explorer before version 9 than in other browsers), then always try to use the cssRules collection first and if it is not supported, then use the rules collection.

Syntax:

Properties that reference the object:

•	object.cssRules
	Related objects: CSSMediaRule, styleSheet

The base interface, through which you can add new functionalities to the cssRules collection, is the CSSRuleList interface.

Possible members:

Properties:

length

Returns an integer that specifies the number of objects in the current collection.

This property is read-only.

Methods:

[index]

Returns an object from the current collection by index.

Parameters:

index

Required. Zero-based integer that specifies the position of the object to retrieve.

Return value:

Returns the CSSRule object at the specified position.

item (index)

Returns an object from the current collection by index.

Parameters:

index

Required. Zero-based integer that specifies the position of the object to retrieve.

Return value:

Returns the CSSRule object at the specified position.

Example HTML code 1:

This example shows how to change a style rule in an embedded style sheet:

<head>
    <style id="myStyle">
        .red {
            color: red;
        }
    </style> 
    <script type="text/javascript">
        function ChangeRedColor () {
            var styleTag = document.getElementById ("myStyle");

                // the style sheet in the style tag
            var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;
            
                // the first rule in the style sheet
            var rules = sheet.cssRules ? sheet.cssRules : sheet.rules;
            var firstRule = rules[0];

                // change the color
            firstRule.style.color = "#00ff00";
        }
    </script> 
</head>
<body>
    <button onclick="ChangeRedColor ()">Change the color of the '.red' style rule!</button>
    <br /><br />
    <div class="red">red division</div>
    <div>non-red division</div>
    <span class="red">red span</span>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example shows how to change a style rule in an external style sheet:

Code

red.css

<head>
    <link id="myLink" rel="stylesheet" type="text/css" href="red.css" />
    <script type="text/javascript">
        function ChangeRedColor () {
            var linkTag = document.getElementById ("myLink");

                // the imported style sheet
            var importedSheet = linkTag.sheet ? linkTag.sheet : linkTag.styleSheet;
    
                // the first rule in the style sheet
            var rules = importedSheet.cssRules ? importedSheet.cssRules : importedSheet.rules;
            var firstRule = rules[0];

                // change the color
            firstRule.style.color = "#00ff00";
        }
    </script> 
</head>
<body>
    <button onclick="ChangeRedColor ()">Change the color of the '.red' style rule!</button>
    <br /><br />
    <div class="red">red division</div>
    <div>non-red division</div>
    <span class="red">red span</span>
</body>