Skip to main content
rules collection

Retrieves a collection of rules defined in a style sheet.


The rules collection has these types of members:


The rules collection has these methods.

item (rules)

Retrieves an object from the rules collection.



The rules collection has these properties.



Retrieves the number of properties that are explicitly set on the parent object.


Sets or retrieves the number of objects in a collection.



This collection is always accessible, even if the style sheet is not enabled. Rules are added to the rules collection with the addRule method on the individual style sheet. A rule that is added to a disabled style sheet does not apply to the document unless the style sheet is enabled. Rules are deleted with the removeRule method.

The rules in this collection are in the source order of the document. As rules are added or deleted through the Cascading Style Sheets (CSS) Object Model, a rule's absolute position in the rules collection might change, but its position relative to other rules remains the same. When you add rules without specifying an index, the rule gets added to the document last. If you specify an index, however, the rule is inserted before the rule currently in that ordinal position in the collection. If the specified index is greater than the number of rules in the collection, the rule is added to the end.


This example shows how to use the rules collection to identify the color specified in style sheet rules.

Code example:

<!DOCTYPE html>
  <title>rules Collection</title>
    function ruleColor(ruleIndex) {
      alert("The color of rule " + ruleIndex + " is " + document.styleSheets[0].rules.item(ruleIndex).style.color + ".");

  <style type="text/css">
    .rule0 {
      color: red;

    .rule1 {
      color: blue;


    The first line of text below is specified as red in the first style sheet rule; the second line is specified as blue. 
    Click one of the buttons below to display the text color associated with the specified rule.

  <p class="rule0" id="oRule0Span">
    Rule 0 is applied to this line.
  <p class="rule1" id="oRule1Span">
    Rule 1 is applied to this line.

  <button onclick="ruleColor(0)">Color of Rule 0</button>&nbsp;
  <button onclick="ruleColor(1)">Color of Rule 1</button>