セレクタの種類と正しい使い分けを初心者向けにわかりやすく解説

CSSでデザインを指定するために欠かせないのが 「セレクタ」 です。
セレクタを正しく理解すると、HTML要素を狙い撃ちしてデザインできるようになり、
CSSが一気に扱いやすくなります。

この記事では、基本のセレクタ・複合セレクタ・用途別の使い分け を初心者向けに丁寧に解説します。

セレクタとは？

セレクタ（selector）とは、CSSで “どのHTML要素にスタイルを適用するか” を指定するもの。

p {
  color: blue;
}

↑ この「p」の部分がセレクタです。
CSSは必ず セレクタ → プロパティ → 値 の流れで書きます。

HTMLタグ名を直接指定。

p { color: #333; }
h2 { margin-bottom: 20px; }

✔ 全ての同じタグに一括で反映
✔ 初心者は使いすぎ注意（全体が変わりすぎる）

最も頻繁に使うセレクタ。

<p class="lead">文章です。</p>

.lead {
  font-size: 18px;
}

✔ 複数要素に共通のデザインを当てたいときに最適
✔ 再利用性が高い
✔ BEMなどのCSS設計でも基本

ページ内で1つだけ使う要素向け。

<div id="main-visual"></div>

#main-visual {
  background: #eee;
}

✔ 一意（unique）な要素に使う
⚠ 多用すると管理が破綻しやすいので初心者は 多用禁止

属性を持つ要素を狙える。

input[type="email"] {
  border-color: blue;
}

他にも：

a[target="_blank"] { … }
img[alt] { … }

✔ フォームデザイン等で強力
✔ 覚えると細かい指定ができる

全要素を対象にする。

* {
  box-sizing: border-box;
}

✔ 初期設定でよく使う
⚠ デザイン指定に使うのは非推奨（範囲が広すぎる）

※ 詳細記事を別で用意するため、基礎だけ触れます。

a:hover { color: red; }   /* 擬似クラス */
p::before { content: "★"; }  /* 擬似要素 */

✔ ホバー・入力状態・装飾などに使う

main p {
  color: #444;
}

✔ main 内のすべての p に適用
⚠ 範囲が広いので乱用注意

nav > ul {
  padding: 0;
}

✔ 直下の子だけ指定（正確なデザイン）

h2 + p {
  margin-top: 0;
}

✔ h2 の直後の p にだけ適用

h2 ~ p {
  color: #555;
}

h1, h2, h3 {
  font-family: "Noto Sans JP";
}

✔ 同じデザインをまとめて当てられる
✔ コードが短くなり管理しやすい

CSSには 強い弱い があり、
どちらが勝つかで最終的なデザインが決まります。

優先順位は以下の順：

① !important（最強）
② IDセレクタ（#id）
③ クラスセレクタ（.class）
④ タグセレクタ（p, h2）
⑤ ユニバーサル（*）

✔ 基本は「クラスセレクタ」を使う
✔ IDはほぼ使わない
✔ タグの多用は危険