CSSRuleList

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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

関連情報