From fcbb0464efff23a5e45ea6f42b0783f6cb71457e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 3 Jan 2022 20:55:09 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_colon_scope/index.md | 160 ++++++++++++++++----------------- 1 file changed, 77 insertions(+), 83 deletions(-) diff --git a/files/ja/web/css/_colon_scope/index.md b/files/ja/web/css/_colon_scope/index.md index 0dbe004e78..378386b574 100644 --- a/files/ja/web/css/_colon_scope/index.md +++ b/files/ja/web/css/_colon_scope/index.md @@ -1,120 +1,114 @@ --- title: ':scope' -slug: 'Web/CSS/:scope' +slug: Web/CSS/:scope tags: + - ':scope' - CSS - - Layout - - Reference - - Web + - レイアウト + - 擬似クラス + - リファレンス - スコープ付き要素 - セレクター - - 疑似クラス -translation_of: 'Web/CSS/:scope' + - ウェブ +browser-compat: css.selectors.scope +translation_of: Web/CSS/:scope --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`:scope`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、セレクターが選択する対象の参照点である要素を表します。 -
/* スコープとなる要素を選択 */
+```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 はメソッドを呼び出した要素を選択します。

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

構文

+## 構文 {{csssyntax}} -

例

+## 例 -

ID の一致

+### ID の一致 -

この例では、 {{domxref("Element.matches()")}} メソッドから :scope を使用して呼び出される要素を選択する方法を紹介します。

+この例では、 {{domxref("Element.matches()")}} メソッドから `:scope` を使用して呼び出される要素を選択する方法を紹介します。 -

JavaScript

+#### JavaScript -
let paragraph = document.getElementById("para");
+```js
+let paragraph = document.getElementById("para");
 let output = document.getElementById("output");
 
 if (paragraph.matches(":scope")) {
   output.innerText = "はい、この要素は自分自身のスコープ内にあります！";
-}
+} +``` -

HTML

+#### HTML -
<p id="para">
+```html
+

   これは段落です。面白い段落ではありません。すみません。
-</p>
-<p id="output"></p>
+

+

+``` -

結果

+#### 結果 -
{{ EmbedLiveSample('Identity_match') }}
+{{ EmbedLiveSample('Identity_match') }} -

直接の子

+### 直接の子 -

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

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

JavaScript

+#### JavaScript -
var context = document.getElementById('context');
-var selected = context.querySelectorAll(':scope > div');
+```js
+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>
+}).join(', ');
+```
+
+#### HTML
+
+```html
+

+    

+        

+        

+    

+    

+        

+    

+

+

     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")}}

- -

関連情報

- - + +

+``` + +#### 結果 + +{{ EmbedLiveSample('Direct_children') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref(":root")}} [擬似クラス](/ja/docs/Web/CSS/Pseudo-classes) +- [セレクターを使用した DOM 要素の特定](/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) +- {{domxref("Element.querySelector()")}} および {{domxref("Element.querySelectorAll()")}} +- {{domxref("Document.querySelector()")}} および {{domxref("Document.querySelectorAll()")}} +- {{domxref("DocumentFragment.querySelector()")}} および {{domxref("DocumentFragment.querySelectorAll()")}} -- cgit v1.2.3-54-g00ecf