--- title: ':scope' slug: 'Web/CSS/:scope' tags: - CSS - Layout - Reference - Web - スコープ付き要素 - セレクター - 疑似クラス translation_of: 'Web/CSS/:scope' ---
{{CSSRef}}

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

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

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

構文

{{csssyntax}}

例

ID の一致

この例では、 {{domxref("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>

結果

{{ EmbedLiveSample('Identity_match') }}

直接の子

:scope 疑似クラスが有用だと示されるのは、すでに受け取っている {{domxref("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>

結果

{{ EmbedLiveSample('Direct_children') }}

仕様書

仕様書 状態 備考
{{ SpecName('CSS4 Selectors', '#the-scope-pseudo', ':scope') }} {{ Spec2('CSS4 Selectors') }} 初回定義

ブラウザーの互換性

{{Compat("css.selectors.scope")}}

関連情報