CSSRuleList は読み取り専用のCSSRule オブジェクトの順序付きコレクションを表します。

CSSRuleList オブジェクトは読み取り専用であり、直接変更することはできませんが、内容が変化していくことがあるのでlive オブジェクトと見なされます。

CSSRule オブジェクトが返す基本ルールを編集するには、CSSStyleSheet のメソッドであるCSSStyleSheet.insertRule() とCSSStyleSheet.deleteRule() を使用します。

このインターフェイスにはコンストラクターがありません。CSSRuleList のインスタンスはCSSStyleSheet.cssRules とCSSKeyframesRule.cssRules から返却されます。

プロパティ

CSSRuleList.length読取専用

このコレクション内のCSSRule オブジェクトの数を表す整数を返します。

メソッド

CSSRuleList.item()

単一のCSSRule を取得します。

例

以下の例には、 3 つのルールがあるスタイルシートがあります。CSSStyleSheet.cssRules を使用するとCSSRuleList を返し、それがコンソールに出力されます。

リスト内のルールの数は、CSSRuleList.length を使用してコンソールに出力されます。最初のCSSRule は0 をCSSRuleList.item の引数に指定することで返されます。この例ではbody セレクターのルールセットが返されます。

CSS

body {  font-family:    system-ui,    -apple-system,    sans-serif;  margin: 2em;}.container {  display: grid;  grid-template-columns: repeat(auto-fill, 200px);}.container > * {  background-color: #3740ff;  color: #fff;}

JavaScript

let myRules = document.styleSheets[0].cssRules;console.log(myRules);console.log(myRules.length);console.log(myRules[0]);

仕様書

ブラウザーの互換性

関連情報

• CSSRule