CSS セレクタ基礎

CSSセレクタ完全ガイド
要素を正確に指定する方法

CSSセレクタは、スタイルを適用する対象の要素を指定するための記法です。
基本的なセレクタから擬似クラス、属性セレクタまで、実務でよく使うパターンをまとめて解説します。

こんな人向けの記事です

CSSセレクタの種類を体系的に知りたい
特定の要素だけにスタイルを適用したい
擬似クラス（:hover, :nth-child等）の使い方を知りたい

Step 1基本セレクタ

セレクタ	対象	例
`*`	全ての要素	`* { margin: 0; }`
`要素名`	指定した要素	`p { color: red; }`
`.クラス名`	指定したクラスを持つ要素	`.title { font-size: 20px; }`
`#ID名`	指定したIDを持つ要素	`#header { height: 60px; }`
`A, B`	AまたはB（グループ化）	`h1, h2 { color: blue; }`

CSS

/* 要素セレクタ */
p { line-height: 1.6; }

/* クラスセレクタ */
.highlight { background: yellow; }

/* IDセレクタ */
#main-content { max-width: 800px; }

/* 複数のセレクタをグループ化 */
h1, h2, h3 { font-weight: bold; }

Step 2結合子（子孫・子・隣接）

結合子	意味	例
`A B`	Aの子孫のB（深さ問わず）	`.nav a { color: white; }`
`A > B`	Aの直接の子のB	`ul > li { list-style: none; }`
`A + B`	Aの直後のB（隣接兄弟）	`h2 + p { margin-top: 0; }`
`A ~ B`	Aの後のB全て（一般兄弟）	`h2 ~ p { color: gray; }`

Step 3擬似クラス

擬似クラス	対象
`:hover`	マウスが乗っている要素
`:focus`	フォーカスされている要素
`:active`	クリック中の要素
`:first-child`	最初の子要素
`:last-child`	最後の子要素
`:nth-child(n)`	n番目の子要素
`:nth-child(odd)`	奇数番目の子要素
`:nth-child(even)`	偶数番目の子要素
`:not(セレクタ)`	指定セレクタに一致しない要素
`:checked`	チェック済みのinput
`:disabled`	無効化された要素

CSS

/* テーブルの偶数行にストライプ */
tr:nth-child(even) { background: #f5f5f5; }

/* 最後の要素のボーダーを消す */
li:last-child { border-bottom: none; }

/* .active 以外のリンク */
a:not(.active) { color: gray; }

Step 4擬似要素

擬似要素	役割
`::before`	要素の前にコンテンツを挿入
`::after`	要素の後にコンテンツを挿入
`::first-line`	最初の行
`::first-letter`	最初の文字
`::placeholder`	inputのプレースホルダー

CSS

/* 必須マークを追加 */
.required::after {
  content: " *";
  color: red;
}

/* リンクの前にアイコンを表示 */
a.external::before {
  content: "\2197 ";  /* 矢印アイコン */
}

Step 5属性セレクタ

セレクタ	対象
`[属性]`	属性を持つ要素
`[属性="値"]`	属性が値と完全一致
`[属性^="値"]`	属性が値で始まる
`[属性$="値"]`	属性が値で終わる
`[属性*="値"]`	属性が値を含む

CSS

/* type="text" のinput */
input[type="text"] { border: 1px solid #ccc; }

/* href が https で始まるリンク */
a[href^="https"] { color: green; }

/* .pdf で終わるリンク */
a[href$=".pdf"] { color: red; }

Step 6詳細度（優先順位）

同じ要素に複数のスタイルが適用される場合、詳細度が高いほうが優先されます。

セレクタ	詳細度
インラインスタイル（`style=""`）	1,0,0,0
IDセレクタ（`#id`）	0,1,0,0
クラス・擬似クラス・属性（`.class`）	0,0,1,0
要素・擬似要素（`div`）	0,0,0,1

!important は最終手段

!important は詳細度を無視して最優先になりますが、保守性が下がるため極力使わないでください。
詳細度の設計を見直すほうが正しいアプローチです。

まとめ

基本は 要素 / .クラス / #ID の3種類
結合子（A B / A > B / A + B）で階層を指定
擬似クラス（:hover, :nth-child）で状態や順番を指定
擬似要素（::before, ::after）でコンテンツを追加
詳細度: インライン > ID > クラス > 要素

CSSセレクタ完全ガイド要素を正確に指定する方法