JavaScript Kit > DOM Reference > Here

DOM CSS Rule Object

Last updated: Februrary 27th, 2006

The CSS Rule object of the StyleSheet object allows you to access and modify the individual rules of a stylesheet. IE and Firefox varies in their implementation of the CSS Rule object, though luckily, the difference is mainly in the syntax:

document.styleSheets[0].cssRules[0] //access the first rule in Firefox
document.styleSheets[0].rules[0] //access the first rule in IE Win

CSS Rule Object

As mentioned, IE and Firefox relies on two different CSS Rule objects to access a stylesheet's rules. Below lists the two objects:

Properties Description
cssRules[] DOM2 based CSS Rule object. Supported in NS/ Firefox.
rules[] IE's CSS Rule object.


if (document.styleSheets[0].cssRules)
else if (document.styleSheets[0].rules)


Properties Description
cssText Returns the content of a css rule in its entirety, from the selector to the corresponding CSS declaration(s). NS/Firefox only. A useful property to easily search within a rule, by looking at both the selector and attributes of a rule all at once.


if (document.styleSheets[0].cssRules[0].cssText.indexOf("float")!=-1)
//this rule has a float attribute defined somewhere

length Returns the length of the CSS Rule object (cssRules.length or rules.length), in other words, the number of rules within a stylesheet.
parentStyleSheet Returns the styleSheet object that contains the current rule.
selectorText Read/write property that returns the selector part of a rule. Setting this property yields unpredictable results in both Firefox and IE.


var mysheet=document.styleSheets[0]
for (i=0; i<mysheet.cssRules.length; i++){
if (mysheet.cssRules[i].selectorText=="p"){ //find the first "p" rule within stylesheet

style The "style" object of the css rule object provides read/write access to individual attributes defined in the rule, similar in fashion to the "style" object of inline styles.


var mysheet=document.styleSheets[0]
if (mysheet.cssRules[0].style.backgroundColor!="yellow")

Sponsored By

DD CSS Library
Free CSS menus and codes to give your site a visual boost.

DOM Window
DOM Document
DOM Element
DOM Event
DOM Style
DOM Table


CopyRight 1998-2012 JavaScript Kit. NO PART may be reproduced without author's permission.