CSS ・ CSSの記法
A, B
複数の要素にまとめて指定する
複数のセレクタを「,（カンマ）」で区切ると、同じスタイルをまとめて指定できます。要素名とid・classを組み合わせて範囲を絞る書き方もあります。
01
サンプルコード
HTML
1<h2 class="title">見出し</h2>
2<p class="lead">リード文</p>
3<p class="note">注意書き（p.note）</p>
4<div class="note">注意書き（div.note）</div>
CSS
1/* カンマ区切り：.title と .lead に同じ色 */
2.title,
3.lead {
4 color: #7d5411;
5}
6/* 要素＋クラス：p 要素の .note だけ */
7p.note {
8 padding: 4px 8px;
9 background: #fff3e4;
10}
02
実行結果
ブラウザでの表示
03
解説
複数のセレクタに同じスタイルを当てたいときは、.title, .lead のように , で区切って並べます。同じ指定を何度も書かずに済みます。読みやすさのため、カンマの後で改行して1行に1つずつ書くのが一般的です。
p.note のように、要素名の直後に（空白を入れずに）クラスや id を続けると、「p 要素で、かつ note クラスを持つもの」だけを指定できます。上の例では、同じ .note でも div には背景が付いていません。
カンマで区切ったセレクタは、詳細度もそれぞれ別に計算されます。
04
応用例・注意点
書き方の違い
| セレクタ | 説明 |
|---|---|
.a, .b | a または b（カンマ区切り：まとめて指定） |
p.note | p 要素で note クラスを持つもの |
h2#title | h2 要素で id が title のもの |
.a.b | a と b の両方のクラスを持つもの |
.a .b | a の中にある b（空白：子孫セレクタ） |
見出しをまとめて指定する
h1〜h3 の書体や行の高さを一度に指定します。
CSS
1h1,
2h2,
3h3 {
4 font-weight: bold;
5 line-height: 1.3;
6}
ホバーとフォーカスを同じ見た目に
疑似クラスもカンマで並べられます。
CSS
1.btn:hover,
2.btn:focus-visible {
3 background: #b68235;
4 color: #fff;
5}
注意点
- 01カンマで区切ったセレクタの1つに書き間違い（存在しない疑似クラスなど）があると、まとめて無効になることがあります。
- 02p.note（空白なし）と p .note（空白あり）は意味が違います。空白ありは「p の中にある .note」になります。
- 03最後のセレクタの後ろにはカンマを付けません。