:scope
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
:scope は CSS の擬似クラスで、セレクターが選択する対象の参照点である要素を表します。
css
/* スコープとなる要素を選択 */
:scope {
background-color: lime;
}
どの要素が :scope に一致するかは、それが使用されるコンテキストによって変わります。
- スタイルシートのルートレベルで使用する場合、
:scopeは:rootと等価であり、通常の HTML 文書内の<html>要素に一致します。 @scopeブロックの中で使用した場合、:scopeはブロックの定義するスコープのルートに一致します。これは@scopeブロック自身からスコープのルートにスタイル設定を適用する方法を提供します。- DOM API 呼び出し（
querySelector(),querySelectorAll(),matches(),Element.closest()など）で使用した場合、:scopeはメソッドを呼び出した要素を選択します。
構文
css
:scope {
/* ... */
}
例
:scope を :root で代用
この例では、スタイルシートのルートレベルで使用した場合、 :scope が :root と等価であることを示しています。この場合、指定された CSS は <html> 要素の背景をオレンジ色に着色しています。
css
:scope {
background-color: orange;
}
:scope を使用して @scope ブロック内のスコープルートにスタイル設定
この例では、 2 つの別個の @scope ブロックを使用して、それぞれ .light-scheme と .dark-scheme クラスを持つ要素内のリンクと照合しています。また、 :scope がスコープルート自体を選択し、スタイル設定を提供するために使用されていることに注意してください。この例では、スコープルートは <div> 要素であり、それらにクラスが適用されています。
HTML
html
<div class="light-scheme">
<p>
MDN には、
<a href="/ja/docs/Web/HTML">HTML</a>, <a href="/ja/docs/Web/CSS">CSS</a>,
<a href="/ja/docs/Web/JavaScript">JavaScript</a>
に関するたくさんの情報が含まれています。
</p>
</div>
<div class="dark-scheme">
<p>
MDN には、
<a href="/ja/docs/Web/HTML">HTML</a>, <a href="/ja/docs/Web/CSS">CSS</a>,
<a href="/ja/docs/Web/JavaScript">JavaScript</a>
に関するたくさんの情報が含まれています。
</p>
</div>
CSS
css
@scope (.light-scheme) {
:scope {
background-color: plum;
}
a {
color: darkmagenta;
}
}
@scope (.dark-scheme) {
:scope {
background-color: darkmagenta;
color: antiquewhite;
}
a {
color: plum;
}
}
結果
JavaScript における :scope の使用
:scope 擬似クラスが有用だと示されるのは、すでに受け取っている Element の直接の子を取得する必要がある場合です。
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>
選択された要素の ID:
<span id="results"></span>
</p>
JavaScript
js
const context = document.getElementById("context");
const selected = context.querySelectorAll(":scope > div");
document.getElementById("results").textContent = Array.prototype.map
.call(selected, (element) => `#${element.getAttribute("id")}`)
.join(", ");
結果
context のスコープは id が context である要素です。選択される要素は、そのコンテキストの直接の子である <div> 要素、すなわち element-1 と element-2 です。
仕様書
| Specification |
|---|
| Selectors Level 4 # the-scope-pseudo |
ブラウザーの互換性
Loading…