【6日でできるHTML＆CSS入門】さまざまなセレクタ

―CSS は「どこに効くか」を選ぶゲーム―
　タグ名だけで要素を選ぶタイプセレクタは “骨格” ですが、実務では id／class／子孫／複数セレクタ などを組み合わせ、ページ中のピンポイントにスタイルを当て分けます。ここでは主要セレクタの書式・適用範囲・使い分けを動くコードで確認します。

１．id と class でラベル貼り

1.1. id セレクタ ― ページに 1 回だけ

<h1 id="main-title">見出し１</h1>
<style>
  #main-title { text-decoration:underline; }
</style>

書式 #id名 { … }
同一 HTML 内に重複不可（一意識別子）

1.2. class セレクタ ― 同ラベルを量産

<p class="note">注釈１</p>
<p class="note">注釈２</p>
<style>
  .note { font-style:italic; }
</style>

書式 .class名 { … }
複数要素に同時適用でき再利用性◎

1.3. id・class 実践サンプル

ファイル名： lesson26_1.html

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8">
  <title>id と class</title>
<style>
  #hero  { color:#0066cc; font-size:200%; }
  .tagline { color:#999; font-style:italic; }
</style>
</head>
<body>
  <h1 id="hero">セレクタ DEMO</h1>
  <p class="tagline">タグライン その１</p>
  <p>通常段落</p>
  <p class="tagline">タグライン その２</p>
</body>
</html>

表示結果

id="hero" の h1 が青＆大文字
.tagline の 2 つだけ斜体グレー

２．構造で選ぶ子孫・複数セレクタ

2.1. 子孫セレクタ ― ネストに着目

<article> 内にある <img> だけに赤枠。半角スペースが“〜の中の”を示す。

article img { border:2px solid #f33; }

2.2. 複数セレクタ（グループ化）

カンマ区切りで同じ宣言をコピペせず適用。

h2, h3, footer { margin-top:2rem; }

2.3. サンプル：子孫＋複数

ファイル名： lesson26_2.html

<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8">
<title>子孫 & 複数セレクタ</title>
<style>
  /* article 内の画像だけ赤枠 */
  article img { border:3px dotted #e60000; }
  /* 複数要素に共通余白 */
  h2, h3, footer { margin-top:1.5em; }
</style></head><body>
  <h2>前置き</h2><p>ここは装飾なし</p>

  <article>
    <h3>記事ブロック</h3>
    <img src="https://picsum.photos/200" alt="">
    <p>説明文</p>
  </article>

  <img src="https://picsum.photos/200?2" alt="外の画像">

  <footer>© 2025 Example</footer>
</body></html>

表示結果

記事内画像だけ点線赤枠
h2/h3/footer に同じ上余白

３．セレクタ一覧表

カテゴリ	記号	書式例	作用範囲
id	`#`	`#logo`	ページに一意
class	`.`	`.alert`	複数要素可
要素型	なし	`nav`	タグ名一致
子孫	(space)	`ul li`	左要素内の全子孫
グループ	`,`	`h1, h2`	列挙全て

まとめ

id = ひとり、class = グループ。目的に応じて命名。
子孫セレクタで“特定領域内だけ”を細かく装飾。
複数セレクタは同宣言を DRY（重複排除）に。

これらを組み合わせれば、HTML を修正せずスタイルだけで複雑なレイアウト制御が可能になります。