セレクタは「どのHTML要素に、このCSSルールを“当てるか”を決めるもの」
CSSの役割は「見た目のルールを書くこと」ですが、 その前に必ずやることがあります。
「このルールを、どの要素に適用するか？」を決めること。
その「どの要素に当てるか」を指定するのが、 セレクタ（selector）です。
p {
color: red;
}
この p がセレクタで、 「すべての <p> 要素を赤くする」という意味になります。
CSSは、
- セレクタで「対象」を選ぶ
- 中括弧
{}の中で「見た目のルール」を書く
という二段構造になっています。
要素セレクタ：タグ名で「種類ごと」にスタイルを当てる
基本の形
p {
color: red;
}
これは「すべての <p> 要素の文字色を赤にする」というルールです。
HTML側はこう。
<p>これは段落です。</p>
<p>これも段落です。</p>
<span>これはspanです。</span>
この場合、
<p> だけが赤くなり、 <span> は何も変わりません。
よく使う要素セレクタの例
h1 {
font-size: 32px;
}
h2 {
font-size: 24px;
}
a {
color: #007bff;
}
ここでやっているのは、
- すべての
<h1>を大きくする - すべての
<h2>を少し小さくする - すべての
<a>（リンク）を青くする
という「タグの種類ごとに見た目を決める」ことです。
要素セレクタは「このタグは、基本的にこういう見た目」という“全体のルール”を決めるときに使う。 ただし、細かい調整はクラスやIDでやることが多い。
クラスセレクタ：「このグループだけ」にスタイルを当てる
基本の形
.highlight {
background-color: yellow;
}
ここでの .highlight がクラスセレクタです。 先頭の . が「クラスですよ」という印。
HTML側はこう。
<p>これは普通の段落です。</p>
<p class="highlight">ここだけ背景を黄色にしたい。</p>
<p class="highlight">ここも黄色にしたい。</p>
この場合、
class="highlight"が付いている<p>だけが黄色になる- それ以外の
<p>は変わらない
という挙動になります。
クラスは「意味のラベル」として付ける
<p class="error">エラーが発生しました。</p>
<p class="success">保存に成功しました。</p>
.error {
color: red;
}
.success {
color: green;
}
ここでの役割分担は、
- HTML → 「これはエラー」「これは成功」という意味のラベルを付ける
- CSS → 「エラーは赤」「成功は緑」という見た目のルールを決める
というものです。
クラスセレクタは「この意味を持つ要素たちに、共通のスタイルを当てる」ためのもの。 “意味のグループ”を作る感覚で使うと、設計がきれいになる。
IDセレクタ：「この1つだけ」にスタイルを当てる
基本の形
#mainTitle {
font-size: 40px;
color: #333;
}
ここでの #mainTitle がIDセレクタです。 先頭の # が「IDですよ」という印。
HTML側はこう。
<h1 id="mainTitle">サイトのメインタイトル</h1>
<h1>別のタイトル</h1>
この場合、
id="mainTitle"の<h1>だけが、特別なスタイルになる- もう一つの
<h1>は、別のルール（またはブラウザのデフォルト）で表示される
という挙動になります。
IDは「ページ内で一意（1つだけ）」が原則
IDは本来、
- ページの中で同じIDは1つだけ
- 「この要素を一意に識別するための名前」
という前提で使います。
JavaScriptで要素を取るときも、
const title = document.querySelector("#mainTitle");
のように、 IDを使うことが多いです。
IDセレクタは「この1つだけ特別扱いしたい」要素に使う。 ただし、乱用すると管理が難しくなるので、 基本はクラスでスタイルを当てて、IDは“特別な識別子”として使う意識が大事。
組み合わせセレクタ：「どの要素の、どのクラスに当てるか」を細かく指定する
要素＋クラス
p.note {
color: #666;
font-style: italic;
}
これは、
<p>要素でclass="note"が付いているもの
だけにスタイルを当てる、という意味です。
HTML側はこう。
<p class="note">これは注釈です。</p>
<div class="note">これはdivですが、noteクラスが付いています。</div>
この場合、
<p class="note">→ スタイルが当たる<div class="note">→ 当たらない（p.note だから）
という挙動になります。
「noteクラスの中でも、pだけにこのスタイルを当てたい」というときに、 要素＋クラスの組み合わせが効いてくる。
子孫セレクタ：「ある要素の中にある別の要素」を指定する
基本の形
.article p {
line-height: 1.8;
}
これは、
.articleクラスが付いている要素の中にある- すべての
<p>要素
にスタイルを当てる、という意味です。
HTML側はこう。
<div class="article">
<p>この記事の本文です。</p>
<p>この記事の本文の2段落目です。</p>
</div>
<p>これは記事とは関係ない段落です。</p>
この場合、
.articleの中の<p>→ 行間が 1.8 になる- 外側の
<p>→ 変わらない
という挙動になります。
子孫セレクタは「このコンテナの中だけ、ルールを変えたい」というときに使う。 “範囲を絞る”ためのセレクタだとイメージすると分かりやすい。
セレクタの「優先度（どれが勝つか）」をざっくり掴んでおく
ざっくりルール
同じプロパティ（例：color）に対して、 複数のCSSルールが当たることがあります。
例えば、
p {
color: black;
}
.highlight {
color: red;
}
p.highlight {
color: blue;
}
HTML：
<p class="highlight">どの色になるでしょう？</p>
この場合、
p→ 黒.highlight→ 赤p.highlight→ 青
という3つの候補がありますが、 最終的には 青 になります。
理由は、
- 要素セレクタよりクラスセレクタの方が強い
- クラス＋要素の組み合わせは、さらに強い
という「優先度（specificity）」のルールがあるからです。
初心者のうちは、 細かい計算を覚える必要はありません。
ただ、
「より具体的に書かれたセレクタほど強くなる」
という感覚だけ持っておくと、 「なんでこのスタイルが当たらないんだ？」というときに、 原因を探しやすくなります。
JavaScriptとセレクタ：「CSSと同じ“選び方”で要素を取れる」
document.querySelector は「CSSセレクタで要素を探す」
JavaScriptで要素を取るとき、 よくこう書きます。
const title = document.querySelector(".title");
const main = document.querySelector("#main");
const paragraphs = document.querySelectorAll(".article p");
ここで使っているのは、 まさに CSSセレクタです。
.title→ クラスセレクタ#main→ IDセレクタ.article p→ 子孫セレクタ
CSSで「どの要素にスタイルを当てるか」を決めるときと、 JavaScriptで「どの要素を操作するか」を決めるときの“選び方”が同じなんです。
セレクタを理解しておくと、 CSSだけでなく JavaScript でも「どの要素を触るか」を自然に書けるようになる。 ここが、セレクタをちゃんと押さえておく大きなメリット。
初心者として「セレクタ」で絶対に掴んでほしいこと
セレクタは、 「このCSSルールを、どのHTML要素に当てるかを決める“選び方の言語”」 です。
要素セレクタ → タグ名で種類ごとに当てる クラスセレクタ → 意味のグループに当てる（.） IDセレクタ → この1つだけに当てる（#） 組み合わせセレクタ → 要素＋クラスなどで、より具体的に絞る 子孫セレクタ → 「この中にあるあれ」に当てる
そして、
「より具体的なセレクタほど強くなる」 「JavaScriptでも同じセレクタで要素を選べる」
この2つまでイメージできていたら、 もうセレクタを“ただの記号の集まり”ではなく、 「HTMLの世界から“どの要素をどう扱うか”を選び出すための、共通の言語」として扱えている状態です。