:scope
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
:scope
は CSS の擬似クラスで、セレクターが選択する対象の参照点である要素を表します。
/* スコープとなる要素を選択 */
:scope {
background-color: lime;
}
どの要素が :scope
に一致するかは、それが使用されるコンテキストによって変わります。
- スタイルシートのルートレベルで使用する場合、
:scope
は:root
と等価であり、通常の HTML 文書内の<html>
要素に一致します。 @scope
ブロックの中で使用した場合、:scope
はブロックの定義するスコープのルートに一致します。これは@scope
ブロック自身からスコープのルートにスタイル設定を適用する方法を提供します。- DOM API 呼び出し(
querySelector()
,querySelectorAll()
,matches()
,Element.closest()
など)で使用した場合、:scope
はメソッドを呼び出した要素を選択します。
構文
:scope {
/* ... */
}
例
:scope
を :root
で代用
この例では、スタイルシートのルートレベルで使用した場合、 :scope
が :root
と等価であることを示しています。この場合、指定された CSS は <html>
要素の背景をオレンジ色に着色しています。
HTML
<html></html>
CSS
:scope {
background-color: orange;
}
結果
:scope
を使用して @scope
ブロック内のスコープルートにスタイル設定
この例では、 2 つの別個の @scope
ブロックを使用して、それぞれ .light-scheme
と .dark-scheme
クラスを持つ要素内のリンクと照合しています。また、 :scope
がスコープルート自体を選択し、スタイル設定を提供するために使用されていることに注意してください。この例では、スコープルートは <div>
要素であり、それらにクラスが適用されています。
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
@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
<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
const context = document.getElementById("context");
const selected = context.querySelectorAll(":scope > div");
document.getElementById("results").innerHTML = 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 |
ブラウザーの互換性
BCD tables only load in the browser