From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/_colon_scope/index.html | 125 +++++++++++++++++++++++++++++++ 1 file changed, 125 insertions(+) create mode 100644 files/ja/web/css/_colon_scope/index.html (limited to 'files/ja/web/css/_colon_scope/index.html') diff --git a/files/ja/web/css/_colon_scope/index.html b/files/ja/web/css/_colon_scope/index.html new file mode 100644 index 0000000000..888c9a876e --- /dev/null +++ b/files/ja/web/css/_colon_scope/index.html @@ -0,0 +1,125 @@ +--- +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') }}初回定義
+ +

ブラウザーの互換性

+ + -- cgit v1.2.3-54-g00ecf