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.cssRulesCSSKeyframesRule.cssRules から返却されます。

プロパティ

CSSRuleList.length読取専用

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

メソッド

CSSRuleList.item()

単一の CSSRule を取得します。

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

リスト内のルールの数は、 CSSRuleList.length を使用してコンソールに出力されます。最初の CSSRule0CSSRuleList.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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
CSSRuleList
item
length

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報