2026年4月16日
擬似クラスとは？:hover以外にも知っておくべきもの
「:hoverは知ってるけど、他の擬似クラスがよくわからない」「フォームの入力チェックをCSSだけでやりたい」——そんな悩みはありませんか？
CSSの擬似クラス（ぎじクラス）は、要素の「状態」や「位置」に応じてスタイルを当てる仕組みです。HTMLにクラスを追加しなくても、特定の条件でスタイルを変えられます。
この記事では、主要な擬似クラスをカテゴリ別に整理し、実践的なコード例で使い方を解説します。読み終わるころには、HTMLを増やさずに状態に応じたスタイルが書けるようになります。
擬似クラスの基本構文
セレクター:擬似クラス名 {
/* スタイル */
}コロン1つ（:）で始まるのが擬似クラスです。コロン2つ（::）で始まる擬似要素（::before, ::after）とは別物なので注意しましょう。
擬似クラスのカテゴリ
| カテゴリ | 代表例 | 用途 |
|---|---|---|
| ユーザー操作系 | :hover, :focus, :active | インタラクション |
| 構造系 | :first-child, :last-child, :nth-child | 位置指定 |
| フォーム系 | :checked, :disabled, :valid, :invalid | 入力状態 |
| 否定・条件系 | :not(), :has(), :is() | 条件付きスタイル |
擬似クラスの詳細度はクラスセレクターと同じ（10）です。詳しくはCSS詳細度の解説を確認してください。
ユーザー操作系の擬似クラス
/* マウスを乗せたとき */
.btn:hover {
background-color: #0f766e;
}
/* フォーカスされたとき（キーボード操作） */
input:focus {
outline: 2px solid #0d9488;
outline-offset: 2px;
}
/* クリック中 */
.btn:active {
transform: scale(0.97);
}
/* 訪問済みリンク */
a:visited {
color: #6b21a8;
}:hoverの詳しい使い方はCSSのhoverで動きをつける方法で解説しています。
実践コード例①：ナビゲーションの:hover + :focus対応
.nav-link {
color: #374151;
text-decoration: none;
padding: 8px 16px;
border-radius: 6px;
transition: background-color 0.2s ease, color 0.2s ease;
}
/* マウスホバーとキーボードフォーカスの両方に対応 */
.nav-link:hover,
.nav-link:focus {
background-color: #f0fdfa;
color: #0d9488;
}
/* フォーカス時のアウトライン（アクセシビリティ） */
.nav-link:focus-visible {
outline: 2px solid #0d9488;
outline-offset: 2px;
}:focus-visible を使うと、キーボード操作時だけアウトラインを表示し、マウスクリック時は非表示にできます。
実践コード例②：フォームの:valid/:invalidでリアルタイム検証
input {
padding: 10px 14px;
border: 2px solid #d1d5db;
border-radius: 6px;
transition: border-color 0.2s ease;
}
/* 入力が正しいとき（例: type="email"に正しいメールアドレス） */
input:valid {
border-color: #10b981;
}
/* 入力が間違っているとき */
input:invalid {
border-color: #ef4444;
}
/* まだ何も入力していないときは赤くしない */
input:placeholder-shown {
border-color: #d1d5db;
}HTMLの type="email" や required 属性と組み合わせると、JavaScriptなしでバリデーション表示ができます。
構造系の擬似クラス
/* 最初の子要素 */
li:first-child { font-weight: bold; }
/* 最後の子要素 */
li:last-child { border-bottom: none; }
/* 偶数番目 */
tr:nth-child(even) { background-color: #f0f9ff; }
/* 奇数番目 */
tr:nth-child(odd) { background-color: white; }
/* 3の倍数番目 */
li:nth-child(3n) { color: #0d9488; }
/* 唯一の子要素 */
p:only-child { margin: 0; }:nth-childの数式パターンを詳しく知りたい場合はnth-childセレクタの使い方を読んでみてください。
実践コード例③：リストの先頭・末尾だけスタイル変更
.list-item {
padding: 12px 16px;
border-bottom: 1px solid #e5e7eb;
}
/* 最初の項目に上の角丸 */
.list-item:first-child {
border-radius: 8px 8px 0 0;
}
/* 最後の項目に下の角丸＋ボーダーなし */
.list-item:last-child {
border-radius: 0 0 8px 8px;
border-bottom: none;
}
/* 項目が1つだけのとき */
.list-item:only-child {
border-radius: 8px;
border-bottom: none;
}否定・条件系の擬似クラス
/* .active 以外の要素 */
.tab:not(.active) {
opacity: 0.6;
}
/* 無効化されたボタン */
button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* チェックされたチェックボックスの隣のラベル */
input:checked + label {
color: #0d9488;
font-weight: bold;
}よくある間違い・注意点
❌ :first-childと:first-of-typeの混同
:first-child は「親の最初の子要素」、:first-of-type は「その要素タイプの最初」です。
/* <div> <span>A</span> <p>B</p> <p>C</p> </div> */
p:first-child { } /* ❌ 何も選ばれない（最初の子はspan） */
p:first-of-type { } /* ✅ <p>B</p> が選ばれる */❌ :hoverだけに頼るとスマホで動かない
スマホにはマウスがないため、:hoverだけで表示する情報はタッチデバイスで見えません。重要な情報は常に表示しましょう。
擬似クラスの詳細度
擬似クラスの詳細度はクラスセレクターと同じ10です。:hover も :nth-child() も .class と同じ強さです。
ブラウザ対応状況
基本的な擬似クラス（:hover, :focus, :nth-child等）は全ブラウザ対応です。:has() は2024年以降のモダンブラウザで対応しています。
まとめ
- ✅ 擬似クラスは要素の「状態」や「位置」でスタイルを当てる仕組み
- ✅ :hover, :focus, :active でインタラクションを作る
- ✅ :nth-child(), :first-child, :last-child で位置を指定
- ✅ :valid, :invalid でフォームのリアルタイム検証
- ✅ :not() で「〜以外」を指定
- ✅ 擬似クラスの詳細度はクラスと同じ（10）
まずは:hover, :focus, :nth-childの3つから使いこなしましょう。セレクタの基本を復習したい場合はCSSセレクターの使い方を確認してください。CSSの基礎全体はCSSとは？初心者向け解説で学べます。
関連記事
- CSSセレクターの使い方 — セレクタの基本を復習
- CSSのhoverで動きをつける方法 — :hoverの詳しい使い方
- nth-childセレクタの使い方 — :nth-childを深掘り
- CSS詳細度の解説 — 擬似クラスの詳細度を確認
- CSSトランジション入門 — 擬似クラスとアニメーションの組み合わせ
✨ セレクタの動きをリアルタイムで体験しよう！
セレクタを入力するとマッチする要素がリアルタイムでハイライトされる無料ツール。specificity 表示付き。
CSS Selector ビジュアライザー →