CSSの核心！セレクタを使いこなしデザインを自在に操る方法

CSSの書き方の基本を学んだところで、次はいよいよCSSの「核心」であるセレクタについて学びます。

セレクタとは、簡単に言えば「どの要素にスタイルを適用するか」を指定するための「狙い撃ち」のルールです。これを使いこなせば、「記事の最初の段落だけ」「サイドバーのリスト項目だけ」といった、細かいデザイン指定が自由自在になります。

🎯 まずは覚えたい！基本のセレクタ3兄弟

まずは、最も頻繁に使用される基本的な3種類のセレクタをマスターしましょう。

HTMLタグ名（h1, p, a など）をそのまま使う、最も広範囲なセレクタです。

/* p（段落）全ての行間を1.8にする */
p {
  line-height: 1.8;
}

2. クラスセレクタ (CSSの主役！)

最も汎用性が高く便利な、CSSの主役とも言えるセレクタです。HTML側で class="名前" を付け、CSS側ではその名前の前にドット（.）を付けて指定します。同じクラス名はページ内で何度でも使えます。

HTML:

<p class="notice">注意してください。</p>
<div class="notice">ここも注意！</div>

/* "notice"クラスがついた全ての要素を、赤色の太字にする */
.notice {
  color: red;
  font-weight: bold;
}

3. IDセレクタ (一意の要素に)

HTML側で id="名前" を付け、CSS側では名前の前にシャープ（#）を付けて指定します。IDは「身分証明書」と同じで、一つのページ内で絶対に重複してはならない厳格なルールがあります。ヘッダーやフッターなど、ページに一つしか存在しない要素に使います。

HTML:

<header id="main-header">...</header>

/* "main-header"というIDを持つ要素の背景色を灰色にする */
#main-header {
  background-color: #f2f2f2;
}

基本のセレクタを組み合わせることで、スタイルの適用範囲をより正確に絞り込むことができます。

子孫セレクタ (半角スペース)

A B のように半角スペースで区切ると、「Aの中にあるB」という意味になります。階層の深さは問いません（孫でもOK）。非常に強力で多用されます。

/* article要素の中にある、全てのp要素だけ文字色を変える */
article p {
  color: #333;
}

A > B のように > で繋ぐと、「Aの"直下"にあるB（Aの子要素であるB）」という意味になります。孫要素には適用されません。

/* ulの直下にあるliにだけ下線を引く */
ul > li {
  border-bottom: 1px solid #ccc;
}

隣接兄弟セレクタ (+)

A + B のように + で繋ぐと、「Aの"すぐ後ろ"にあるB（同じ階層で隣り合っているB）」という意味になります。見出し直後の段落の余白を詰めたい時などに便利です。

/* h2の直後にあるpの上余白を0にする */
h2 + p {
  margin-top: 0;
}

グループ化セレクタ (,)

A, B, C のようにカンマ（,）で区切ると、「AとBとCに同じスタイルを適用する」という意味になります。コードの重複を減らせます。

/* h1, h2, h3 に共通のフォントを指定する */
h1, h2, h3 {
  font-family: 'Merriweather', serif;
}

擬似クラスは、要素の特定の状態や位置に応じてスタイルを変えることができる、非常に便利な特殊セレクタです。

:hover (マウスが乗った時)

要素の上にマウスカーソルが乗っている間のスタイルを指定します。

/* リンク(aタグ)にマウスを乗せたら下線を引く */
a:hover {
  text-decoration: underline;
}

:focus (選択された時)

フォームの入力欄などがクリック（またはTabキー）で選択され、アクティブになっている間のスタイルを指定します。

/* input欄が選択されたら、枠線を青くする */
input:focus {
  border-color: blue;
}

:first-child / :last-child (最初/最後の子要素)

兄弟要素の中で「最初の子要素」または「最後の子要素」である場合に適用されます。リストの最後の項目だけ境界線を消したい、といった場合に重宝します。

/* リスト(li)の最後の項目の下線を消す */
li:last-child {
  border-bottom: none;
}

:nth-child(n) (n番目の子要素)

n番目の子要素を指定する強力なセレクタです。nには数字のほか、even（偶数）やodd（奇数）も指定できます。

/* テーブル(tr)の偶数行だけ背景色を変える（縞模様にする） */
tr:nth-child(even) {
  background-color: #f9f9f9;
}