セレクタとは

セレクタは、CSS でスタイルを当てる対象や、JavaScript で操作する対象の要素を指定するための書き方です。

主な書き方

• 要素名：p、a、h2 など
• クラス：.button のように「.」の後にクラス名
• ID：#header のように「#」の後に ID
• 属性：[type="text"] のように属性と値
• 組み合わせ：.nav a（.nav の中の a）、.nav > li（.nav の直下の li）
• 状態：:hover、:focus、:nth-child(2) などの疑似クラス

JavaScript での使い方

document.querySelector('.button') や document.querySelectorAll('.nav a') のように、CSS と同じセレクタで要素を探せます（DOM の操作）。

書き方のポイント

• ID はページ内で一つだけなので、スタイルの指定にはクラスを使うことが多い
• セレクタを長く細かくしすぎると、優先度（詳細度）が高くなり、あとから上書きしにくくなる
• JavaScript で使う目印のクラス（js- で始めるなど）と、見た目のためのクラスを分けると、修正の影響を把握しやすい

関連用語

DOM、イベントリスナー、レスポンシブ