blob: 378386b574bd4cf6747db42adf0742486fe2847d (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
---
title: ':scope'
slug: Web/CSS/:scope
tags:
- ':scope'
- CSS
- レイアウト
- 擬似クラス
- リファレンス
- スコープ付き要素
- セレクター
- ウェブ
browser-compat: css.selectors.scope
translation_of: Web/CSS/:scope
---
{{CSSRef}}
**`: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` はメソッドを呼び出した要素を選択します。
## 構文
{{csssyntax}}
## 例
### ID の一致
この例では、 {{domxref("Element.matches()")}} メソッドから `:scope` を使用して呼び出される要素を選択する方法を紹介します。
#### JavaScript
```js
let paragraph = document.getElementById("para");
let output = document.getElementById("output");
if (paragraph.matches(":scope")) {
output.innerText = "はい、この要素は自分自身のスコープ内にあります！";
}
```
#### HTML
```html
<p id="para">
これは段落です。面白い段落ではありません。すみません。
</p>
<p id="output"></p>
```
#### 結果
{{ EmbedLiveSample('Identity_match') }}
### 直接の子
`:scope` 擬似クラスが有用だと示されるのは、すでに受け取っている {{domxref("Element")}} の直接の子を取得する必要がある場合です。
#### JavaScript
```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
```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') }}
## 仕様書
{{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()")}}
|
