セレクタとは？スタイルの「宛先」

CSSを書くとき、常に考えなければならないのが「どの要素にその見た目を適用するか」ということです。この対象を指定する部分を「セレクタ（Selector）」と呼びます。適切なセレクタを選ぶことで、HTML構造を変えることなく、狙った箇所だけを正確にデザインすることができます。

基本セレクタの3本柱

まずは、最も基本的かつ頻繁に使用される3つのセレクタを完全に理解しましょう。

1. 要素セレクタ (Element Selector)

HTMLのタグ名をそのまま指定します。「ページ内の全ての画像を角丸にする」「全ての段落の文字を大きくする」といった、大まかなルールを作るのに適しています。

p {
    line-height: 1.6;
    color: #333;
}

2. クラスセレクタ (Class Selector)

要素に付けられた `class` 属性の名前を使います。先頭にドット `.` を付けます。複数の要素に同じクラスを付けることができるため、「ボタンのデザイン」や「カードの枠組み」など、再利用可能なパーツを作るのに最適です。

.btn-primary {
    background-color: blue;
    color: white;
}

3. IDセレクタ (ID Selector)

要素の `id` 属性の名前を使います。先頭にハッシュ `#` を付けます。IDはページ内で重複してはいけないため、「ヘッダー」や「メインロゴ」など、唯一無二の要素に使われます。

#main-nav {
    position: fixed;
    top: 0;
}

関係性で指定する：結合子

HTMLの階層構造を利用して、より細かく指定することもできます。

• 子孫結合子 (スペース): `div p` → divの中にある全てのp（孫要素も含む）
• 子結合子 (>): `div > p` → divの直下のp（孫は含まない）
• 隣接兄弟 (+): `h2 + p` → h2のすぐ後ろにあるp

状態を表す：擬似クラス

要素の「状態」に応じてスタイルを変えることも可能です。

• `:hover` → マウスカーソルが乗ったとき
• `:ntn-child(2)` → 2番目の要素
• `:first-child` / `:last-child` → 最初 / 最後の要素

詳細度（Specificity）のルール

「なぜかスタイルが効かない！」というトラブルの9割は、この詳細度が原因です。CSSには「より具体的な指定を優先する」という厳格な点数システムがあります。

例えば、`#header p` (100 + 1 = 101点) と `.text` (10点) が競合した場合、点数の高いIDセレクタを含む方が優先されます。「IDはクラスより強い」と覚えておきましょう。

まとめ

CSSセレクタをマスターすることは、意図したデザインを効率よく実装するための近道です。まずはクラスセレクタを中心に構築し、必要な場所で結合子や擬似クラスを組み合わせていくのが、メンテナンスしやすいCSSを書くコツです。