CSSセレクタ一覧（クリックでライブ実演）

CSSセレクタの基本

CSSセレクタとは、スタイルを適用する対象のHTML要素を指定するための書き方です。タグ名で指定する要素セレクタ、class属性を指す「.クラス名」、id属性を指す「#ID名」が基本で、そこに階層・属性・状態の条件を重ねて対象を絞り込んでいきます。

デモの見方

一覧からセレクタを選ぶと、デモの中で一致した要素をオレンジの枠で囲み、サンプルCSSを実際に適用します。ヒット数で「何個に当たっているか」も確認できます。デモは独立した領域で動くので、* や :hover のように広く当たるセレクタを試してもツール本体の表示は変わりません。

疑似クラスと疑似要素の違い

コロン1つの疑似クラス（:hover / :first-child）は、すでにあるHTML要素を「状態」や「位置」で絞り込みます。コロン2つの疑似要素（::before / ::first-letter）は、HTMLには存在しない部分をCSS側で作り出して装飾します。

思ったところに当たらないときは

• そもそも一致しているか（このツールのヒット数で確認できます）
• 詳細度で他のルールに負けていないか（ID > クラス > 要素）
• 後から書かれた同じ詳細度のルールに上書きされていないか
• カンマ区切りのグループ指定に、解釈できない書き方が混ざっていないか（混ざるとルール全体が無視されます）

関連ツール

• CSSホバーエフェクト ギャラリー（:hover を使った実用パターン100種）
• CSSアニメーション ギャラリー
• HTML見出し構造チェッカー（階層セレクタを組む前の構造確認に）