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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
|
---
title: ':where()'
slug: Web/CSS/:where
tags:
- ':where'
- CSS
- 実験的
- NeedsBrowserCompatibility
- NeedsContent
- NeedsExample
- 擬似クラス
- リファレンス
- セレクター
- ウェブ
browser-compat: css.selectors.where
translation_of: Web/CSS/:where
---
{{CSSRef}}
**`:where()`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)関数で、セレクターリストを引数として取り、列挙されたセレクターのうちの何れかに当てはまるすべての要素を選択します。
```css
/* ヘッダー、メイン、フッターの何れかの中にある段落に
カーソルをかざしたときに選択 */
:where(header, main, footer) p:hover {
color: red;
cursor: pointer;
}
/* 上記のものは下記のものと同等です。 */
header p:hover,
main p:hover,
footer p:hover {
color: red;
cursor: pointer;
}
```
`:where()` と {{CSSxRef(":is", ":is()")}} の違いは、 `:where()` は[詳細度](/ja/docs/Web/CSS/Specificity)が常に 0 であるのに対して、 `:is()` は引数内で最も詳細度の高いセレクターの詳細度を取ります。
### 寛容なセレクター解釈
仕様では、`:is()` と `:where()` が[寛容なセレクターリスト](https://drafts.csswg.org/selectors-4/#typedef-forgiving-selector-list)を受け入れると定義されています。
CSS では、セレクターリストを使用する場合、いずれかのセレクターが無効であれば、リスト全体が無効であると判断されます。 `is()` や `:where()` を使用する場合、 1 つでも解釈に失敗するとセレクターリスト全体が無効とみなされるのではなく、不正確または対応していないセレクターは無視され、他のものが使用されます。
```css
:where(:valid, :unsupported) {
...
}
```
Will still parse correctly and match `:valid` even in browsers which don't support `:unsupported`, whereas:
```css
:valid, :unsupported {
...
}
```
Will be ignored in browsers which don't support `:unsupported` even if they support `:valid`.
## 例
### :where() と :is() の比較
この例では `:where()` がどのように作用するのかを示し、 `:where()` と `:is()` の違いも説明しています。
以下のような HTML を想定してください。
```html
<article>
<h2>:is() でスタイル付けしたリンク</h2>
<section class="is-styling">
<p>こちらがメインコンテンツです。これは<a href="https://mozilla.org">リンクを含んでいます</a>。
</section>
<aside class="is-styling">
<p>こちらが脇コンテンツです。これも<a href="https://developer.mozilla.org">リンクを含んでいます</a>。
</aside>
<footer class="is-styling">
<p>こちらがフッターです。これも<a href="https://github.com/mdn">リンク</a>を含んでいます。
</footer>
</article>
<article>
<h2>:where() でスタイル付けしたリンク</h2>
<section class="where-styling">
<p>こちらがメインコンテンツです。これは<a href="https://mozilla.org">リンクを含んでいます</a>.
</section>
<aside class="where-styling">
<p>こちらが脇コンテンツです。これは<a href="https://developer.mozilla.org">also リンクを含んでいます</a>.
</aside>
<footer class="where-styling">
<p>こちらがフッターです。これも<a href="https://github.com/mdn">リンク</a>を含んでいます。
</footer>
</article>
```
このやや矛盾した例では、2 つの記事があり、それぞれがセクション、脇、フッターを含んでいます。これらの記事は、子要素をマークするために使われるクラスによって異なります。
中のリンクの選択をより簡単にして、しかし区別できるようにするために、次のように `:is()` や `:where()` を使うことができます。
```css
html {
font-family: sans-serif;
font-size: 150%;
}
:is(section.is-styling, aside.is-styling, footer.is-styling) a {
color: red;
}
:where(section.where-styling, aside.where-styling, footer.where-styling) a {
color: orange;
}
```
しかし、後からシンプルなセレクターを使ってフッターのリンクの色を上書きしたい場合はどうすればいいのでしょうか？
```css
footer a {
color: blue;
}
```
これは赤いリンクに作用しません。 `:is()` の中のセレクターは全体のセレクターの詳細度で算出され、クラスセレクターは要素セレクターよりも高い詳細度を持っているからです。
しかし、 `:where()` 内のセレクターは詳細度が 0 なので、オレンジ色のフッターリンクは単純セレクターによって上書きされてしまいます。
> **Note:** この例は GitHub からも見ることができます。 [is-where](https://mdn.github.io/css-examples/is-where/) を参照してください。
{{EmbedLiveSample('Examples', '100%', 600)}}
## 構文
{{CSSSyntax}}
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- {{CSSxRef(":is", ":is()")}}
- [セレクターリスト](/ja/docs/Web/CSS/Selector_list)
- [ウェブコンポーネント](/ja/docs/Web/Web_Components)
|
