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

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

現在、スタイルシートで使用したときは、現時点ではスコープ付きの要素を明確に確立する方法がないため、 :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 の定義
草案 初回定義。

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本サポート 無し ?

32

201

無し157
Support in DOM API such as in querySelector() and querySelectorAll()27 ?32 無し157
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本サポート 無し ? ?

32

201

無し7 ?
Support in DOM API such as in querySelector() and querySelectorAll()27 ? ?32 無し7 ?

1. 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.

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

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