第3章：CSS セレクタを極める！「誰に」デザインするかを指定する技術

こんにちは！前回はCSSの基本的な書き方（文法）と、HTMLへの適用方法について解説しました。

今回は、CSSを書く上で最も重要で、かつ面白い部分である「セレクタ（Selector）」について深掘りします。

「すべての文字を赤くする」のではなく、「記事の中の」「強調したい部分だけ」を赤くしたい。

そんなふうに、HTML文書の中からデザインを変えたい部分をスナイパーのように正確に狙い撃ちする技術、それがセレクタです。これさえ覚えれば、あなたのデザインの自由度は劇的に向上します！

🎯 基本の「3大セレクタ」をマスターしよう

CSSには数多くのセレクタがありますが、Webサイトを作る上で9割以上の場面で使うのが、以下の3つです。

1. 要素セレクタ (Type Selector): HTMLのタグ名（要素名）をそのまま指定します。
ページ内の「そのタグすべて」に同じスタイルを適用したい場合に使います。
書き方： タグ名 { ... }
例： p { color: gray; }（すべての段落の文字をグレーにする）
2. クラスセレクタ (Class Selector) 【最重要！】: 自分で好きな名前（クラス名）を付け、その名前が付いた要素だけにスタイルを適用します。
HTML側で class="profile" のように属性を追加して使います。
書き方： .クラス名 { ... }（先頭にドット . が必要）
例： .profile { border: 1px solid #ccc; }
3. IDセレクタ (ID Selector): ページ内にたった1つしか存在しない要素（例：ヘッダー、ロゴ、メインコンテンツの大枠など）に使います。
HTML側で id="main-header" のように属性を追加して使います。
書き方： #ID名 { ... }（先頭にシャープ # が必要）
例： #main-header { background: black; }

迷ったら、「クラスセレクタ（.）」を使うのが基本です。

基本の3つだけでなく、条件を組み合わせることで、さらに賢く指定することができます。

「特定の要素の中にある要素」だけを狙います。セレクタの間を半角スペースで区切ります。

/* articleタグの中にある pタグ だけに適用 */
article p {
  line-height: 2.0;
}

これにより、サイドバーの p には影響を与えず、記事本文の p だけ行間を広げる、といったことが可能です。

要素の「状態」を指定します。代表的なのがリンクのホバー（マウスが乗った時）です。

/* aタグ（リンク）にマウスが乗った時だけ色を変える */
a:hover {
  color: orange;
  text-decoration: underline;
}

もし、「CSSを書いたのに反映されない！」というトラブルが起きたら、この話を思い出してください。

CSSには「より詳細に指定された方が勝つ」というルール（詳細度）があります。基本的な強さの順序は以下の通りです。

IDセレクタ (#id) > クラスセレクタ (.class) > 要素セレクタ (p)

例えば、以下のように書いた場合、文字は何色になるでしょうか？

/* 要素セレクタ */
p { color: blue; }

/* クラスセレクタ */
.red-text { color: red; }

HTMLが <p class="red-text">こんにちは</p> だった場合、クラスセレクタの方が強いため、文字は「赤色」になります。

IDセレクタはさらに強力なので、多用すると後から「クラスで色を変えたいのにIDが邪魔して変わらない！」という事態になりがちです。これがIDの使いすぎが推奨されない理由の一つです。