概要
CSS には、HTML 要素を選択してスタイルを適用するための セレクタ (selector) が用意されています。
最も基本的なセレクタは以下の 3 種ですが、
-
要素型セレクタ （
div, p など）
-
idセレクタ（
#main）
-
クラスセレクタ（
.item）
実際には、Web アプリ開発で頻出する複雑な UI を作るために、より多くのセレクタが存在します。
本記事では、下記の観点からまとめました。
- 各セレクタの書き方
- 特徴と使いどころ
- 他セレクタとの比較
- 実務でのユースケース
目次
要素型セレクタ
例
- 要素名そのままを書くだけ
- ページ内の該当要素すべてに適用される
特徴
| 長所 |
短所 |
| 最も基本で簡潔 |
影響範囲が広く、意図せず多くの要素に当たることがある |
idセレクタ
例
#header {
background: black;
}
-
id="header" を持つ要素だけに適用
- ページ内で一意（1つだけ）であることが前提
特徴
| 長所 |
短所 |
| 1 要素だけ確実に選択できる |
多用すると再利用性が下がる、特異性が強すぎる |
クラスセレクタ
例
.card {
border-radius: 8px;
}
- 複数の要素に一括適用できる
- Web アプリやコンポーネント開発では最もよく使う
特徴
| 長所 |
短所 |
| 再利用性が高い、推奨される |
名前管理（命名規則）が必要 |
属性セレクタ
[属性名] または [属性名="値"] のように指定する。
例
input[type="email"] {
border-color: skyblue;
}
よく使うバリエーション
| 記法 |
意味 |
[attr] |
属性を持つすべて |
[attr="value"] |
完全一致 |
[attr^="abc"] |
先頭が一致 |
[attr$="xyz"] |
末尾が一致 |
[attr*="foo"] |
部分一致 |
特徴
| 長所 |
短所 |
| input などフォーム UI で必須 |
過剰に使うと複雑になる |
疑似クラスセレクタ
状態 を表すセレクタ（例：:hover, :focus, :active）。
例
button:hover {
opacity: 0.8;
}
主な疑似クラス
-
:hover（マウスオーバー）
-
:focus（入力フォーカス）
:active:checked:disabled:first-child:nth-child(n):not(selector)
特徴
| 長所 |
短所 |
| UI の状態変化を簡単に表現 |
ネストが深いと読みづらい |
疑似要素セレクタ
要素の一部（「中身」ではなく「抽象的な部分」）を扱う。
例
p::first-line {
font-weight: bold;
}
主な疑似要素
::before::after::first-line::first-letter::selection
特徴
| 長所 |
短所 |
| 装飾（アイコン、補助テキスト）が柔軟に作れる |
疑似要素の内容は DOM に存在しない |
子孫・子・兄弟セレクタ
DOM の階層構造を使って選択する。
子孫セレクタ（A B）
子セレクタ（A > B）
ul > li {
margin-bottom: 4px;
}
隣接兄弟（A + B）
h1 + p {
margin-top: 0;
}
一般兄弟（A ~ B）
label ~ input {
margin-left: 8px;
}
特殊セレクタ（ユニバーサル・グループ化など）
ユニバーサルセレクタ
* {
box-sizing: border-box;
}
グループ化セレクタ
h1, h2, h3 {
font-family: sans-serif;
}
比較と使い分け
| 種類 |
主な用途 |
特徴 |
| 要素型 |
全体の基本スタイル |
シンプルだが範囲が広い |
| id |
特定の 1 要素 |
特異性が高い、乱用非推奨 |
| クラス |
UI コンポーネント |
最も再利用性が高い |
| 属性 |
フォーム・条件分岐 |
柔軟なフィルタリング |
| 疑似クラス |
状態変化 |
UI インタラクション |
| 疑似要素 |
before/after 装飾 |
DOM 外の装飾 |
| 子孫/子/兄弟 |
HTML 構造に基づく |
ネスト管理に便利 |
| ユニバーサル |
リセット |
全要素共通処理 |
ユースケース
1. UI コンポーネントの汎用化（クラス）
.btn {
padding: 8px 16px;
border-radius: 4px;
}
2. 入力タイプごとに条件付け（属性）
input[type="password"] {
letter-spacing: 3px;
}
3. コンポーネント内の装飾（疑似要素）
.card::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,0.03);
}
4. 状態管理（疑似クラス）
input:focus {
border-color: dodgerblue;
}
参考リンク
