---
title: CSSRule
slug: Web/API/CSSRule
tags:
  - API
  - CSSOM
  - Interface
  - Reference
translation_of: Web/API/CSSRule
---
<div>{{APIRef("CSSOM")}}</div>

<p><strong><code>CSSRule</code></strong> インターフェイスは、1 つの CSS 規則を表します。いくつかある規則の種類は、下記の {{anch("Type constants", "型定数")}} セクションのリストを見てください。</p>

<p><code>CSSRule</code> インターフェイスは、すべての規則に共通のプロパティを指定します。特定の種類の規則に特有のプロパティは、各種類の規則のための、さらに特別なインターフェース内で指定されています。</p>

<p><code>CSSRule</code> への参照は、{{domxref("CSSStyleSheet")}} の <code>cssRules</code> のリストから探してください。</p>

<h2 id="Properties_common_to_all_CSSRule_instances" name="Properties_common_to_all_CSSRule_instances">すべての CSSRule インスタンスに共通のプロパティ</h2>

<dl>
 <dt id="cssText">{{domxref("CSSRule.cssText")}}</dt>
 <dd>規則のテキスト表現を表す。例: "<code>h1,h2 { font-size: 16pt }</code>" や "<code>@import 'url'</code>"。規則の部分 (つまり、この例の "font-size" の値) にアクセスまたは変更するには、{{anch("Type constants", "規則の種類の特別なインターフェイス")}} のプロパティ (型定数) を使用してください。</dd>
 <dt id="parentRule">{{domxref("CSSRule.parentRule")}} {{readonlyinline}}</dt>
 <dd>含まれている規則を返す。規則が含まれていなければ <code>null</code> を返す。つまり、この規則が {{cssxref("@media")}} ブロック内部のスタイル規則の場合、親規則は {{domxref("CSSMediaRule")}} になります。</dd>
 <dt id="parentStyleSheet">{{domxref("CSSRule.parentStyleSheet")}} {{readonlyinline}}</dt>
 <dd>この規則を含むスタイルシートの {{domxref("CSSStyleSheet")}} オブジェクトを返す。</dd>
 <dt id="type">{{domxref("CSSRule.type")}} {{readonlyinline}}</dt>
 <dd>CSS 規則の種類を示すいずれかの {{anch("Type constants", "型定数")}}。</dd>
</dl>

<h2 id="CSSRule" name="CSSRule">定数</h2>

<h3 id="Type_constants" name="Type_constants">型定数</h3>

<p><code>CSSRule</code> インターフェイスは、<code>CSSRule</code> の {{domxref("cssRule/type","type")}} プロパティと組み合わせて使用できる、規則の種類 (さらに、これを実装する特別なインターフェイス) を識別するための整数定数を指定します。これらの定数とインターフェイスの関係は、次のとおりです:</p>

<table class="standard-table">
 <tbody>
  <tr>
   <th>型</th>
   <th>値</th>
   <th>規則固有のインターフェイス</th>
   <th>備考と使用例</th>
  </tr>
  <tr>
   <td><code>CSSRule.STYLE_RULE</code></td>
   <td style="text-align: center;"><code>1</code></td>
   <td>{{domxref("CSSStyleRule")}}</td>
   <td>もっとも一般的な規則の種類:<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>{{cssxref("@import")}} 規則。(ドキュメントが完成するまで、インターフェイスの定義は Mozilla のソースコードを参照してください: <a href="https://dxr.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>将来使用するための予約領域</em></td>
   <td style="text-align: center;"><code>9</code></td>
   <td> </td>
   <td>将来、カラープロファイルの定義に使用されます。</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>(ほとんどのブラウザーから削除されました。)</td>
  </tr>
 </tbody>
</table>

<p>定数の最新版の非公式リストは <a href="http://wiki.csswg.org/spec/cssom-constants">CSSWG Wiki</a> で確認できます。</p>

<h2 id="Specification" name="Specification">仕様</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">策定状況</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSSOM', '#css-rules', 'CSSRule')}}</td>
   <td>{{Spec2('CSSOM')}}</td>
   <td><code>CHARSET_RULE</code> 値と <code>UNKNOWN_RULE</code> 値を廃止。<code>NAMESPACE_RULE</code> 値を追加。</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS3 Animations",'#interface-cssrule', 'CSSRule')}}</td>
   <td>{{Spec2('CSS3 Animations')}}</td>
   <td><code>KEYFRAMES_RULE</code> 値と <code>KEYFRAME_RULE</code> 値を追加。</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Fonts', '#om-fontfeaturevalues', 'CSSRule')}}</td>
   <td>{{Spec2('CSS3 Fonts')}}</td>
   <td><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><code>COUNTER_STYLE_RULE</code> 値を追加。</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS3 Conditional", '#extentions-to-cssrule-interface', 'CSSRule')}}</td>
   <td>{{Spec2('CSS3 Conditional')}}</td>
   <td><code>SUPPORTS_RULE</code> 値を追加。(<code>DOCUMENT_RULE</code> は、CSS Conditional Rules Level 4 へ移された)</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSRule', 'CSSRule')}}</td>
   <td>{{Spec2('DOM2 Style')}}</td>
   <td>初期定義。</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの実装状況</h2>

<p>{{Compat("api.CSSRule")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><a href="/ja/docs/Web/Guide/DOM/Using_dynamic_styling_information">動的なスタイル情報の利用</a></li>
</ul>