セレクタ
初級読み方：セレクタ｜英語：Selector
CSSでスタイルを当てる対象を指定する部分だよ。タグ名・.クラス名・#id名 で書くよ。いつ使う？ CSSを書くときは必ずセレクタを使う。「この見出しの色を変えたい」「このボタンだけ大きくしたい」など、どの要素にスタイルを当てるか決めるのがセレクタの役割だよ。間違いやすいポイント: .btn と .btn の間にスペースがあると「子孫セレクタ」になるよ。.btn:hover のようにスペースなしで書かないと疑似クラスが効かないから注意しよう。
やさしい説明
セレクタとは、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; }いつ使う？
CSSを書くときは必ずセレクタを使います。「見出しの色を変えたい」「カードに影をつけたい」——スタイルを当てる対象を指定するのがセレクタの役割です。
間違いやすいポイント
❌ クラスセレクタの . を忘れる
/* ❌ ドットがない → cardタグを探してしまう */
card { color: red; }
/* ✅ ドットをつける → class="card" に適用 */
.card { color: red; }よくある疑問
Q: セレクタの優先順位は？
A: ID > クラス > 要素名 の順に優先されます。詳しくは「詳細度」を参照してください。
Q: 複数の要素に同じスタイルを当てるには？
A: カンマで区切ります。例: h1, h2, h3 { color: blue; } で3つの見出しに同じ色を指定できます。
Q: セレクタが効かないときは？
A: 開発者ツール（F12）でスタイルを確認しましょう。クラス名のスペルミス、スペースの有無、詳細度の負けが主な原因です。
関連用語
📖 関連レッスン
レッスンを見る →