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 の定義
草案 初回定義。

ブラウザーの対応

機能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,