CSS:scope 疑似クラスは、セレクターが選択する対象の参照点である要素を表します。

/* スコープとなる要素を選択 */
:scope {
  background-color: lime;
}

現在、スタイルシートで使用したときは、現時点ではスコープ付きの要素を明確に確立する方法がないため、 :scope:root と同じです。 DOM API (querySelector(), querySelectorAll(), matches(), Element.closest()) で使用したときは、 :scope はメソッドを呼び出した要素を選択します。

構文

:scope

この例では、 Element.matches() メソッドから :scope を使用して呼び出される要素を選択する方法を紹介します。

JavaScript

let paragraph = document.getElementById("para");
let output = document.getElementById("output");

if (paragraph.matches(":scope")) {
  output.innerText = "はい、この要素は自分自身のスコープ内にあります!";
}

HTML

<p id="para">
  これは段落です。これは面白くない段落です。すみません。
</p>
<p id="output"></p>

結果

仕様策定状況

仕様書 策定状況 コメント
Selectors Level 4
:scope の定義
草案 初回定義。

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 32
完全対応 32
完全対応 20
無効
無効 From version 20: this feature is behind the layout.css.scope-pseudo.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 15Safari 完全対応 7WebView Android 未対応 なしChrome Android ? Edge Mobile ? Firefox Android 完全対応 32
完全対応 32
完全対応 20
無効
無効 From version 20: this feature is behind the layout.css.scope-pseudo.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 完全対応 7Samsung Internet Android 未対応 なし
Support in DOM API such as in querySelector() and querySelectorAll()Chrome 完全対応 27Edge 未対応 なしFirefox 完全対応 32IE 未対応 なしOpera 完全対応 15Safari 完全対応 7WebView Android 完全対応 ありChrome Android ? Edge Mobile ? Firefox Android 完全対応 32Opera Android 未対応 なしSafari iOS 完全対応 7Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,