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
|
---
title: セレクターリスト
slug: Web/CSS/Selector_list
tags:
- CSS
- セレクター
- セレクターリスト
browser-compat: css.selectors.list
translation_of: Web/CSS/Selector_list
---
{{CSSRef}}
CSS の **セレクターリスト** (selector list) (`,`) は，すべての一致するノードを選択します。
```css
/* すべての一致する要素を選択 */
span,
div {
border: red 2px solid;
}
```
スタイルシートの大きさを縮小するために、グループセレクターをカンマ区切りのリストにすることができます。
## 構文
```css
element, element, element { スタイルプロパティ }
```
## 例
### 単一行のグループ化
カンマ区切りのリストを使用して単一行にしたグループ化セレクターです。
```css
h1, h2, h3, h4, h5, h6 { font-family: helvetica; }
```
### 複数行のグループ化
カンマ区切りのリストを使用して複数行にしたグループ化セレクターです。
```css
#main,
.content,
article {
font-size: 1.1em;
}
```
### セレクターリストの無効化
セレクターリストを使用する欠点は、以下のものが等価ではないことです。
```css
h1 { font-family: sans-serif }
h2:maybe-unsupported { font-family: sans-serif }
h3 { font-family: sans-serif }
```
```css
h1, h2:maybe-unsupported, h3 { font-family: sans-serif }
```
これは、セレクターリスト内に未対応のセレクターが一つでもあった場合は、ルール全体が無効化されてしまうためです。
この対策方法としては、 {{CSSxRef(":is", ":is()")}} や {{CSSxRef(":where", ":where()")}} セレクターを使用すれば、セレクターリストを寛容に受け止めることができます。こうすると、リスト内の無効なセレクターは無視しますが、有効なセレクターは受け入れます。
```css
h1 { font-family: sans-serif }
h2:maybe-unsupported { font-family: sans-serif }
h3 { font-family: sans-serif }
```
```css
:is(h1, h2:maybe-unsupported, h3) { font-family: sans-serif }
```
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- The {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} および {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} 擬似クラスは、セレクターリストを寛容に受け入れます。
|
