セレクタ
初級読み方：セレクタ｜英語：Selector
CSSでスタイルを当てる対象を指定する部分だよ。タグ名・.クラス名・#id名 で書くよ。
やさしい説明
セレクタとは、CSSで「どの要素にスタイルを当てるか」を指定する部分です。
教室で「3列目の人、立ってください」と言うとき、「3列目の人」がセレクタです。CSSでも同じように「h1」「.card」「#header」と書いて、スタイルを当てる対象を選びます。
セレクタには種類があります。タグ名で選ぶ（h1）、クラス名で選ぶ（.card）、ID名で選ぶ（#header）、状態で選ぶ（a:hover）などです。
具体例・使い方
/* タグ名セレクタ: 全てのh1に適用 */
h1 { color: blue; }
/* クラスセレクタ: class="card" に適用 */
.card { border: 1px solid #ccc; }
/* IDセレクタ: id="header" に適用 */
#header { background: #333; }
/* 疑似クラス: マウスを乗せたとき */
a:hover { color: red; }よく使うセレクタ一覧
| 書き方 | 何を選ぶ？ | 例 |
|---|---|---|
h1 | そのタグ全部 | 全ての見出し |
.card | そのクラスを持つ要素 | class="card" |
#header | そのIDを持つ要素（1個） | id="header" |
a:hover | 状態（マウスを乗せた等） | ホバー中のリンク |
.box p | .boxの中のp（子孫） | 半角スペースで繋ぐ |
* | 全ての要素 | 全体リセット等 |
いつ使う？
CSSを書くときは必ずセレクタを使います。「見出しの色を変えたい」「カードに影をつけたい」——スタイルを当てる対象を指定するのがセレクタの役割です。
同じ要素に複数のセレクタが当たると、詳細度（specificity）が高い方が勝ちます。強さの順は ID（#）> クラス（.）> タグ。狙ったスタイルが効かないときは、別のセレクタに負けていないか疑いましょう。
間違いやすいポイント
❌ クラスセレクタの . を忘れる
ドットを付け忘れると、CSSは「そのクラス」ではなく「そのタグ」を探してしまいます。
/* ❌ ドットがない → cardタグを探してしまう */
card { color: red; }
/* ✅ ドットをつける → class="card" に適用 */
.card { color: red; }❌ 同じIDを複数の要素に付ける
IDはページ内で1個だけが原則。同じIDを複数に付けると、CSSは効いてもJavaScriptの getElementById が最初の1個しか拾えず、バグの原因になります。複数に当てたいときはクラスを使いましょう。
よくある疑問
Q: セレクタの優先順位は？
A: ID > クラス > 要素名 の順に優先されます。詳しくは「詳細度」を参照してください。
Q: 複数の要素に同じスタイルを当てるには？
A: カンマで区切ります。例: h1, h2, h3 { color: blue; } で3つの見出しに同じ色を指定できます。
Q: セレクタが効かないときは？
A: 開発者ツール（F12）でスタイルを確認しましょう。クラス名のスペルミス、スペースの有無、詳細度の負けが主な原因です。
関連用語
📖 関連レッスン
レッスンを見る →