【6日でできるHTML＆CSS入門】複数セレクタ

―1 回の宣言で複数タグを一気にスタイリング―
　「同じ色を h3 と p の両方に付けたい」──そんな時に CSS を2 回書くのは非効率です。**複数セレクタ（グループセレクタ）**を使えば、カンマ区切りでまとめて指定でき、重複コードを削減し可読性も向上します。ここでは書式・具体例・よくある落とし穴を体系的に解説します。

1．複数セレクタの書式と基本

1.1. 基本構文

セレクタA, セレクタB, セレクタC {
  プロパティ: 値;
}

カンマ（,）の後は半角スペースを入れると読みやすくなります。

1.2. 利用シーン

ケース	具体例
同系見出しを統一	h1, h2, h3
ボタン 3 種を同じ角丸	.btn-primary, .btn-secondary, .btn-tertiary
休日セルをまとめて赤文字	#saturday, #sunday

1.3. カスケード順位

複数セレクタは どの要素にもまったく同じ詳細度 で当たります。後からより詳細度の高い個別指定で上書き可能。

２．基本サンプル：見出しと段落を青に

ファイル名： lesson27_1.html

ブラウザでは h2 と p だけ が青文字になります。h1 は指定外なので黒のまま。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>複数セレクタ基本</title>
<style>
  /* h2 と p を青文字に統一 */
  h2, p { color:#0044cc; }
</style>
</head>
<body>
  <h1>グループセレクタ入門</h1>
  <h2>これは青い見出し</h2>
  <p>この段落も青です。</p>
  <h2>もう一つの青い見出し</h2>
  <p>2 つ目の段落も同じ青。</p>
</body>
</html>

表示結果

2.1. 使用タグ早見表

タグ/属性	説明
`<style>`	内部スタイル定義
`h2, p`	複数セレクタ：h2 と p

３．応用例：曜日ごとの色分け

3.1. コード

ファイル名： lesson27_2.html

#sat, #sun の部分が 複数 id セレクタ です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>曜日カラー分割</title>
<style>
  /* 月〜金を黒、土を青、日を赤 */
  .weekday      { color:#000; }
  #sat, #sun    { font-weight:bold; } /* 共通で太字 */
  #sat          { color:#0066ff; }
  #sun          { color:#ff3300; }
</style>
</head>
<body>
  <h1>1 週間の曜日</h1>
  <ul>
    <li class="weekday">Mon</li>
    <li class="weekday">Tue</li>
    <li class="weekday">Wed</li>
    <li class="weekday">Thu</li>
    <li class="weekday">Fri</li>
    <li id="sat">Sat</li>
    <li id="sun">Sun</li>
  </ul>
</body>
</html>

表示結果

3.2. 仕組み解説

.weekday で平日 5 行を一括指定
休日 2 行は id 指定、さらに 共通プロパティ を #sat, #sun にまとめ DRY 達成

４．よくあるミスと対策

ミス	症状	解決策
カンマ後に `;` を入れる	CSS 構文エラー	`,` で列挙し波かっこは 1 つ
スペース抜け	`h2,p` は合法だが読みにくい	`h2, p` と半角スペースで可読性向上
詳細度衝突	特定要素だけ色が変わらない	具体的セレクタ（例 `.note p`）で上書き

５．練習問題（答えは折りたたみ内）

ファイル名： lesson27_3.html

課題: li 要素 10 個のうち偶数行をグレー背景、奇数行を白背景にしなさい。
ヒント: li:nth-child(even), li:nth-child(odd) を複数セレクタで。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>練習問題（偶数・奇数行を色分け）</title>
  <style>
    /* リスト全体のリセット */
    ul { list-style: none; margin: 0; padding: 0; width: 200px; }

    /* 奇数・偶数どちらにも共通の余白 */
    li:nth-child(odd),
    li:nth-child(even) {
      padding: 6px 12px;
    }

    /* 奇数行（odd）は白背景 */
    li:nth-child(odd)  { background: #ffffff; }

    /* 偶数行（even）は薄いグレー背景 */
    li:nth-child(even) { background: #f0f0f0; }
  </style>
</head>
<body>
  <h1>リスト行の背景色切り替え</h1>

  <!-- 10 行のサンプルリスト -->
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
  </ul>
</body>
</html>

表示結果

まとめ

複数セレクタ = カンマ区切りで同宣言をまとめる。DRY 原則で保守性アップ。
id／class／擬似クラスなど種類を問わず組み合わせ可。
共通宣言 → 個別上書きの順で書くとスタイルが衝突しにくい。