CSSRuleList

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

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

js

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

仕様書

Specification
CSS Object Model (CSSOM)
# the-cssrulelist-interface

ブラウザーの互換性

BCD tables only load in the browser

関連情報