:scope
:scope
は CSS の擬似クラスで、セレクターが選択する対象の参照点である要素を表します。
css
/* スコープとなる要素を選択 */
:scope {
background-color: lime;
}
現在、スタイルシートで使用したときは、現時点ではスコープ付きの要素を明確に確立する方法がないため、 :scope
は :root
と同じです。 DOM API (querySelector()
, querySelectorAll()
, matches()
, Element.closest()
など) で使用したときは、 :scope
はメソッドを呼び出した要素を選択します。
構文
:scope
例
ID の一致
この例では、 Element.matches()
メソッドから :scope
を使用して呼び出される要素を選択する方法を紹介します。
JavaScript
js
let paragraph = document.getElementById("para");
let output = document.getElementById("output");
if (paragraph.matches(":scope")) {
output.innerText = "はい、この要素は自分自身のスコープ内にあります!";
}
HTML
html
<p id="para">これは段落です。面白い段落ではありません。すみません。</p>
<p id="output"></p>
結果
直接の子
:scope
擬似クラスが有用だと示されるのは、すでに受け取っている Element
の直接の子を取得する必要がある場合です。
JavaScript
js
var context = document.getElementById("context");
var selected = context.querySelectorAll(":scope > div");
document.getElementById("results").innerHTML = Array.prototype.map
.call(selected, function (element) {
return "#" + element.getAttribute("id");
})
.join(", ");
HTML
html
<div id="context">
<div id="element-1">
<div id="element-1.1"></div>
<div id="element-1.2"></div>
</div>
<div id="element-2">
<div id="element-2.1"></div>
</div>
</div>
<p>
Selected elements ids :
<span id="results"></span>
</p>
結果
仕様書
Specification |
---|
Selectors Level 4 # the-scope-pseudo |
ブラウザーの互換性
BCD tables only load in the browser