mozilla

Revision 85903 of CSSRule

  • Revision slug: DOM/cssRule
  • Revision title: CSSRule
  • Revision id: 85903
  • Created:
  • Creator: Sevenspade
  • Is current revision? No
  • Comment no changes; page display name changed to 'CSSRule'

Revision Content

{{ DomRef() }}

The CSSRule object represents a single CSS style rule. It may be a part of a stylesheet's cssRules list.

There are several kinds of rules. All of them share a few common properties on the {{ Anch("CSSRule") }} interface and most of them have some properties specific to a particular rule type.

Type Rule-specific interface Description
CSSRule.STYLE_RULE {{ Anch("CSSStyleRule") }}  
CSSRule.MEDIA_RULE {{ Anch("CSSMediaRule") }}  
CSSRule.FONT_FACE_RULE {{ Anch("CSSFontFaceRule") }}  
CSSRule.PAGE_RULE {{ Anch("CSSPageRule") }}  Not implemented
CSSRule.IMPORT_RULE {{ Anch("CSSImportRule") }}  
CSSRule.CHARSET_RULE {{ Anch("CSSCharsetRule") }}  
CSSRule.UNKNOWN_RULE {{ Anch("CSSUnknownRule") }}  Not implemented

CSSRule

cssText 
Returns the textual representation of the rule, e.g. "h1,h2 { font-size: 16pt }".
parentRule 
Returns the containing rule, if any (e.g. a style rule inside an @media block).
parentStyleSheet 
Returns the stylesheet object that this rule is part of.
type 
The type of the rule, e.g. CSSRule.CHARSET_RULE or CSSRule.IMPORT_RULE.

CSSStyleRule

selectorText 
Gets/sets the textual representation of the selector for this rule, e.g. "h1,h2".
style 
Returns the CSSStyleDeclaration object for the declaration block of the rule.

CSSMediaRule

CSSFontFaceRule

CSSPageRule

CSSImportRule

CSSCharsetRule

CSSUnknownRule

Specification

See also

{{ languages( { "pl": "pl/DOM/cssRule" } ) }}

Revision Source

<p>{{ DomRef() }}</p>
<p>The <code>CSSRule</code> object represents a single CSS style rule. It may be a part of a <a href="/en/DOM/stylesheet" title="en/DOM/stylesheet">stylesheet</a>'s <a href="/en/DOM/stylesheet.cssRules" title="en/DOM/stylesheet.cssRules">cssRules</a> list.</p>
<p>There are several kinds of rules. All of them share a few common properties on the {{ Anch("CSSRule") }} interface and most of them have some properties specific to a particular rule type.</p>
<table class="fullwidth-table"> <tbody> <tr> <th>Type</th> <th>Rule-specific interface</th> <th>Description</th> </tr> <tr> <td><code>CSSRule.STYLE_RULE</code></td> <td>{{ Anch("CSSStyleRule") }}</td> <td> </td> </tr> <tr> <td><code>CSSRule.MEDIA_RULE</code></td> <td>{{ Anch("CSSMediaRule") }}</td> <td> </td> </tr> <tr> <td><code>CSSRule.FONT_FACE_RULE</code></td> <td>{{ Anch("CSSFontFaceRule") }}</td> <td> </td> </tr> <tr> <td><code>CSSRule.PAGE_RULE</code></td> <td>{{ Anch("CSSPageRule") }}</td> <td> Not implemented</td> </tr> <tr> <td><code>CSSRule.IMPORT_RULE</code></td> <td>{{ Anch("CSSImportRule") }}</td> <td> </td> </tr> <tr> <td><code>CSSRule.CHARSET_RULE</code></td> <td>{{ Anch("CSSCharsetRule") }}</td> <td> </td> </tr> <tr> <td><code>CSSRule.UNKNOWN_RULE</code></td> <td>{{ Anch("CSSUnknownRule") }}</td> <td> Not implemented</td> </tr> </tbody>
</table>
<h3 name="CSSRule">CSSRule</h3>
<dl> <dt><a href="/en/DOM/cssRule.cssText" title="en/DOM/cssRule.cssText">cssText</a> </dt> <dd>Returns the textual representation of the rule, e.g. "h1,h2 { font-size: 16pt }".</dd> <dt><a href="/en/DOM/cssRule.parentRule" title="en/DOM/cssRule.parentRule">parentRule</a> </dt> <dd>Returns the containing rule, if any (e.g. a style rule inside an @media block).</dd> <dt><a href="/en/DOM/cssRule.parentStyleSheet" title="en/DOM/cssRule.parentStyleSheet">parentStyleSheet</a> </dt> <dd>Returns the <a href="/en/DOM/stylesheet" title="en/DOM/stylesheet">stylesheet</a> object that this rule is part of.</dd> <dt><a href="/en/DOM/cssRule.type" title="en/DOM/cssRule.type">type</a> </dt> <dd>The type of the rule, e.g. <code>CSSRule.CHARSET_RULE</code> or <code>CSSRule.IMPORT_RULE</code>.</dd>
</dl>
<h3 name="CSSStyleRule">CSSStyleRule</h3>
<dl> <dt><a href="/en/DOM/cssRule.selectorText" title="en/DOM/cssRule.selectorText">selectorText</a> </dt> <dd>Gets/sets the textual representation of the selector for this rule, e.g. "h1,h2".</dd> <dt><a href="/en/DOM/cssRule.style" title="en/DOM/cssRule.style">style</a> </dt> <dd>Returns the <a href="/en/DOM/CSSStyleDeclaration" title="en/DOM/CSSStyleDeclaration">CSSStyleDeclaration</a> object for the <a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/syndata.html#block">declaration block</a> of the rule.</dd>
</dl>
<h3 name="CSSStyleRule_2">CSSMediaRule</h3>
<h3 name="CSSFontFaceRule">CSSFontFaceRule</h3>
<h3 name="CSSPageRule">CSSPageRule</h3>
<h3 name="CSSImportRule">CSSImportRule</h3>
<h3 name="CSSCharsetRule">CSSCharsetRule</h3>
<h3 name="CSSUnknownRule">CSSUnknownRule</h3>
<h3 name="Specification">Specification</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRule">DOM Level 2 CSS: CSSRule</a></li> <li><a class=" external" href="http://dev.w3.org/csswg/cssom/#css-rules" title="http://dev.w3.org/csswg/cssom/#css-rules">CSS Object Model: CSS Rules</a></li>
</ul>
<h3>See also</h3>
<ul> <li><a href="/en/DOM/Using_dynamic_styling_information" title="en/DOM/Using_dynamic_styling_information">Using dynamic styling information</a></li>
</ul>
<p>{{ languages( { "pl": "pl/DOM/cssRule" } ) }}</p>
Revert to this revision