--- title: CSSRule slug: Web/API/CSSRule translation_of: Web/API/CSSRule --- <div>{{APIRef("CSSOM")}}</div> <p>Интерфейс <strong>CSSRule </strong>представляет собой одно правило CSS. Есть несколько типов правил, перечисленных в разделе {{anch("Type constants")}} ниже.</p> <p>Интерфейс CSSRule определяет общие свойства для всех правил, в то время как свойства характерные только для определённых типов правил указаны в более специализированных интерфейсах для соответствующих типов этих правил.</p> <p>Ссылки на CSSRule вы можете получить на странице {{domxref ("CSSStyleSheet")}} список cssRules.</p> <h2 id="Общие_свойства_для_всех_экземпляров_CSSRule">Общие свойства для всех экземпляров CSSRule</h2> <dl> <dt id="cssText">{{domxref("CSSRule.cssText")}}</dt> <dd>Represents the textual representation of the rule, e.g. "<code>h1,h2 { font-size: 16pt }</code>" or "<code>@import 'url'</code>". To access or modify parts of the rule (e.g. the value of "font-size" in the example) use the properties on the {{anch("Type constants", "specialized interface for the rule's type")}}.</dd> <dt id="parentRule">{{domxref("CSSRule.parentRule")}} {{readonlyinline}}</dt> <dd>Returns the containing rule, otherwise <code>null</code>. E.g. if this rule is a style rule inside an {{cssxref("@media")}} block, the parent rule would be that {{domxref("CSSMediaRule")}}.</dd> <dt id="parentStyleSheet">{{domxref("CSSRule.parentStyleSheet")}} {{readonlyinline}}</dt> <dd>Returns the {{domxref("CSSStyleSheet")}} object for the style sheet that contains this rule</dd> <dt id="type">{{domxref("CSSRule.type")}} {{readonlyinline}}</dt> <dd>One of the {{anch("Type constants")}} indicating the type of CSS rule.</dd> </dl> <h2 id="CSSRule">Константы</h2> <h3 id="Типы_констант">Типы констант</h3> <p>The <code>CSSRule</code> interface specifies integer constants that can be used in conjunction with a <code>CSSRule</code>'s {{domxref("cssRule/type","type")}} property to discern the rule type (and therefore, which specialized interface it implements). The relationships between these constants and the interfaces are:</p> <table class="standard-table"> <tbody> <tr> <th>Type</th> <th>Value</th> <th>Rule-specific interface</th> <th>Comments and examples</th> </tr> <tr> <td><code>CSSRule.STYLE_RULE</code></td> <td style="text-align: center;"><code>1</code></td> <td>{{domxref("CSSStyleRule")}}</td> <td>The most common kind of rule:<br> <code>selector { prop1: val1; prop2: val2; }</code></td> </tr> <tr> <td><code>CSSRule.IMPORT_RULE</code></td> <td style="text-align: center;"><code>3</code></td> <td>{{domxref("CSSImportRule")}}</td> <td>An {{cssxref("@import")}} rule. (Until the documentation is completed, see the interface definition in the Mozilla source code: <a href="http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/css/nsIDOMCSSImportRule.idl#9">nsIDOMCSSImportRule</a>.)</td> </tr> <tr> <td><code>CSSRule.MEDIA_RULE</code></td> <td style="text-align: center;"><code>4</code></td> <td>{{domxref("CSSMediaRule")}}</td> <td> </td> </tr> <tr> <td><code>CSSRule.FONT_FACE_RULE</code></td> <td style="text-align: center;"><code>5</code></td> <td>{{domxref("CSSFontFaceRule")}}</td> <td> </td> </tr> <tr> <td><code>CSSRule.PAGE_RULE</code></td> <td style="text-align: center;"><code>6</code></td> <td>{{domxref("CSSPageRule")}}</td> <td> </td> </tr> <tr> <td><code>CSSRule.KEYFRAMES_RULE</code></td> <td style="text-align: center;"><code>7</code></td> <td>{{domxref("CSSKeyframesRule")}} {{experimental_inline}}</td> <td> </td> </tr> <tr> <td><code>CSSRule.KEYFRAME_RULE</code></td> <td style="text-align: center;"><code>8</code></td> <td>{{domxref("CSSKeyframeRule")}} {{experimental_inline}}</td> <td> </td> </tr> <tr> <td><em>Reserved for future use</em></td> <td style="text-align: center;"><code>9</code></td> <td> </td> <td>Should be used to define color profiles in the future</td> </tr> <tr> <td><code>CSSRule.NAMESPACE_RULE</code></td> <td style="text-align: center;"><code>10</code></td> <td>{{domxref("CSSNamespaceRule")}} {{experimental_inline}}</td> <td> </td> </tr> <tr> <td><code>CSSRule.COUNTER_STYLE_RULE</code></td> <td style="text-align: center;"><code>11</code></td> <td>{{domxref("CSSCounterStyleRule")}} {{experimental_inline}}</td> <td> </td> </tr> <tr> <td><code>CSSRule.SUPPORTS_RULE</code></td> <td style="text-align: center;"><code>12</code></td> <td>{{domxref("CSSSupportsRule")}}</td> <td> </td> </tr> <tr> <td><code>CSSRule.DOCUMENT_RULE</code></td> <td style="text-align: center;"><code>13</code></td> <td>{{domxref("CSSDocumentRule")}} {{experimental_inline}}</td> <td> </td> </tr> <tr> <td><code>CSSRule.FONT_FEATURE_VALUES_RULE</code></td> <td style="text-align: center;"><code>14</code></td> <td>{{domxref("CSSFontFeatureValuesRule")}}</td> <td> </td> </tr> <tr> <td><code>CSSRule.VIEWPORT_RULE</code></td> <td style="text-align: center;"><code>15</code></td> <td>{{domxref("CSSViewportRule")}} {{experimental_inline}}</td> <td> </td> </tr> <tr> <td><code>CSSRule.REGION_STYLE_RULE</code></td> <td style="text-align: center;"><code>16</code></td> <td>{{domxref("CSSRegionStyleRule")}} {{experimental_inline}}</td> <td> </td> </tr> <tr> <td><code>CSSRule.UNKNOWN_RULE</code></td> <td style="text-align: center;"><code>0</code></td> <td>{{domxref("CSSUnknownRule")}} {{obsolete_inline}}</td> <td> </td> </tr> <tr> <td><code>CSSRule.CHARSET_RULE</code></td> <td style="text-align: center;"><code>2</code></td> <td><code>CSSCharsetRule</code> {{obsolete_inline}}</td> <td>(Removed in most browsers.)</td> </tr> </tbody> </table> <p>An up-to-date informal list of constants can be found on the <a href="http://wiki.csswg.org/spec/cssom-constants">CSSWG Wiki</a>.</p> <h2 id="Specification">Specifications</h2> <table class="standard-table"> <thead> <tr> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td>{{SpecName('CSSOM', '#css-rules', 'CSSRule')}}</td> <td>{{Spec2('CSSOM')}}</td> <td>Obsoleted values <code>CHARSET_RULE</code> and <code>UNKNOWN_RULE</code>. Added value <code>NAMESPACE_RULE</code>.</td> </tr> <tr> <td>{{SpecName("CSS3 Animations",'#interface-cssrule', 'CSSRule')}}</td> <td>{{Spec2('CSS3 Animations')}}</td> <td>Added values <code>KEYFRAMES_RULE</code> and <code>KEYFRAME_RULE</code>.</td> </tr> <tr> <td>{{SpecName('CSS3 Fonts', '#om-fontfeaturevalues', 'CSSRule')}}</td> <td>{{Spec2('CSS3 Fonts')}}</td> <td>Added value <code>FONT_FEATURE_VALUES_RULE</code>.</td> </tr> <tr> <td>{{SpecName("CSS3 Counter Styles", "#extentions-to-cssrule-interface", 'CSSRule')}}</td> <td>{{Spec2("CSS3 Counter Styles")}}</td> <td>Added value <code>COUNTER_STYLE_RULE</code>.</td> </tr> <tr> <td>{{SpecName("CSS3 Conditional", '#extentions-to-cssrule-interface', 'CSSRule')}}</td> <td>{{Spec2('CSS3 Conditional')}}</td> <td>Added value <code>SUPPORTS_RULE</code>. (<code>DOCUMENT_RULE</code> has been pushed to CSS Conditional Rules Level 4)</td> </tr> <tr> <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSRule', 'CSSRule')}}</td> <td>{{Spec2('DOM2 Style')}}</td> <td>Initial definition.</td> </tr> </tbody> </table> <h2 id="Browser_compatibility">Browser compatibility</h2> <p>{{Compat}}</p> <h2 id="See_also">See also</h2> <ul> <li><a href="/en-US/docs/Web/Guide/DOM/Using_dynamic_styling_information">Using dynamic styling information</a></li> </ul>