:scope

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

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

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

構文

:scope

例

ID の一致

この例では、 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>

結果

直接の子

:scope 擬似クラスが有用だと示されるのは、すでに受け取っている Element の直接の子を取得する必要がある場合です。

JavaScript

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

<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

関連情報