CSSを書き始めると、
多くの人が最初につまずくのがこの問題です。
・CSSを書いたのに反映されない
・なぜこの要素だけ変わらないのか分からない
・どこを指定しているのか曖昧
その原因の多くは、
CSSセレクタの理解不足にあります。
この記事では、
CSSの中核となる
セレクタの基本（要素 / class / id） を整理し、
「なぜこのCSSが当たるのか」を説明できる状態を目指します。
この記事で学べること
・CSSセレクタとは何か
・要素セレクタ
・classセレクタ
・idセレクタ
・正しい使い分けの考え方
CSSセレクタとは何か
CSSセレクタとは、
「どのHTML要素にスタイルを適用するか」
を指定するための仕組みです。
CSSは、
「誰に」「何を」適用するか
をセットで指定しています。
・セレクタ：誰に
・スタイル：何を
この関係を理解することが重要です。
要素セレクタとは
要素セレクタは、
HTMLタグそのものを指定する方法です。
例
・p
・h1
・a
など、タグ名をそのまま使います。
要素セレクタの特徴
要素セレクタの特徴は次のとおりです。
・同じタグすべてに適用される
・広範囲に影響する
・デザインのベース指定に向いている
ページ全体の
「基本ルール」を決めるときに使われます。
classセレクタとは
classセレクタは、
class属性を持つ要素を指定する方法です。
HTML側で付けた class を使って、
特定のグループにスタイルを当てます。
classセレクタの特徴
classセレクタの特徴は次のとおりです。
・複数の要素に使える
・最もよく使われる
・柔軟にデザイン指定できる
実務では、
CSS指定の中心は class になります。
idセレクタとは
idセレクタは、
id属性を持つ要素を指定する方法です。
idは、
ページ内で一意（1回のみ）
というルールがあります。
idセレクタの特徴
idセレクタの特徴は次のとおりです。
・1ページに1つだけ
・強い指定になる
・ピンポイント指定向き
ただし、
CSSでは 多用しません。
class と id の使い分け
ここで、
多くの初心者が迷うポイントを整理します。
・class
複数要素
デザイン指定の基本
・id
単一要素
JavaScriptやリンク用途が中心
CSSでは、
「迷ったら class」
が基本ルールです。
なぜidセレクタは避けられがちなのか
idセレクタは便利ですが、
CSSでは次の理由から控えめに使われます。
・指定が強すぎる
・後から上書きしづらい
・再利用できない
そのため、
CSS設計では
class中心の指定が推奨されます。
セレクタの強さ（優先順位）
CSSには、
どの指定が優先されるか
というルールがあります。
基本的な強さは次の順です。
・要素セレクタ
・classセレクタ
・idセレクタ
強い指定ほど、
他のCSSを上書きします。
CSSが効かないときの考え方
CSSが効かない場合、
次の順で確認してください。
・そもそも指定している要素は合っているか
・class名やid名に間違いはないか
・他のCSSに上書きされていないか
この切り分けができるようになると、
CSSのトラブルは激減します。
HTMLとCSSは必ずセットで考える
CSSセレクタは、
HTMLの構造が分かっていないと使えません。
・HTMLで何にclassを付けたか
・どのタグが使われているか
CSSを書くときは、
必ずHTMLと行き来しながら考えましょう。
初心者がよくやるミス
よくあるミスを整理します。
・idを多用してしまう
・意味のないclass名を付ける
・どこに効いているか分からない
これらはすべて、
セレクタの役割を意識することで防げます。
まとめ
CSSセレクタは、
CSSの中で最も重要な要素のひとつです。
・要素セレクタ：全体ルール
・classセレクタ：基本の指定
・idセレクタ：限定的な指定
この使い分けを理解できれば、
CSSが「なんとなく」ではなく
論理的に書ける ようになります。
次は、
CSS理解の最大の壁である
ボックスモデル に進みます。
次に読むべき記事
▶ 次の記事
4-4 ボックスモデルを完全に理解する
▶ 関連記事
4-2 CSSの書き方（inline / internal / external）
3-3 HTML属性とは？class・id・nameの違い
コメント