SYNCERのロゴ
アイキャッチ画像

CSSGroupingRule - グルーピングのCSSルール

CSSGroupingRuleは、@media(CSSMediaRule)など、複数のCSSルールを子に含めるCSSルールが実装しているインターフェイスです。

概要

名前
CSSGroupingRule
継承
IDL
[Exposed=Window]
interface CSSGroupingRule : CSSRule {
  [SameObject] readonly attribute CSSRuleList cssRules;
  unsigned long insertRule(CSSOMString rule, optional unsigned long index = 0);
  void deleteRule(unsigned long index);
};

typedef USVString CSSOMString;
仕様書
https://drafts.csswg.org/cssom/#cssgroupingrule

チュートリアル

CSSGroupingRuleは、CSSRuleListの各インデックスに含まれています。先にStyleSheetListCSSStyleSheetCSSRuleListCSSRuleを理解して下さい。@mediaのように、子に複数のCSSルールを含めるCSSルールが、共通してCSSGroupingRuleを実装しています。

/* CSSMediaRule */
@media all {
	p {
		color: red ;
	}
	a {
		background-color: blue ;
	}
}

コンストラクタ

コンストラクタはありません。

プロパティ

cssRules

子に含む全てのCSSルールをCSSRuleListで返します。

メソッド

deleteRule()

宣言ブロック内から1つのCSSルールを削除します。

insertRule()

宣言ブロック内に1つのCSSルールを追加します。

定数

固有の定数はありません。

イベント

固有のイベントハンドラはありません。

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
CSSGroupingRule 9+
cssRules 9+
deleteRule() 9+
insertRule() 9+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月15日 (日)
コンテンツを公開しました。