疑似クラスとは？

疑似クラス（Pseudo-classes）は、CSSにおいて、要素が特定の状態にある場合にのみスタイルを適用するための仕組みです。HTMLにクラスを追加することなく、ユーザーの操作や、要素が文書ツリー内のどこに位置するかといった条件に基づいて、動的にスタイルを変更できます。

疑似クラスは、セレクタに続けてコロン（:）を1つ付けた後に疑似クラス名を記述します。

構文:

CSS

セレクタ:疑似クラス名 {
  プロパティ: 値;
}

---

主要な疑似クラスの種類と使い方

疑似クラスは機能によって大きく分類されます。ここでは、特によく使われる疑似クラスとその用途を紹介します。

1. ユーザー操作（動的疑似クラス）

ユーザーの操作や要素の状態変化に応じてスタイルを適用します。

疑似クラス	用途	記述例
:hover	要素にマウスカーソルが重なっている時	a:hover { color: red; }
:active	要素がクリック（または押下）されている間	button:active { background-color: darkgray; }
:focus	要素がフォーカス（選択）されている時（例: 入力欄、ボタン）	input:focus { border: 2px solid blue; }
:focus-within	要素自身、またはその子孫要素のいずれかにフォーカスがある時	div:focus-within { background-color: lightyellow; }

ヒント: リンクのスタイル設定では、:link → :visited → :hover → :active（LVHAの順）で記述することで、意図した通りのスタイルが適用されやすくなります。

2. リンクの状態

アンカータグ（<a>）のリンクの状態に応じてスタイルを適用します。

疑似クラス	用途	記述例
:link	未訪問のリンク	a:link { color: blue; }
:visited	訪問済みのリンク	a:visited { color: purple; }

3. 構造的疑似クラス（要素の位置）

兄弟要素の中での位置に基づいてスタイルを適用します。これらは、リストやテーブルの行などに交互に色を付けたり（ストライプ効果）、特定の要素だけを装飾したりするのに非常に役立ちます。

疑似クラス	用途	記述例
:first-child	兄弟要素の中で最初の要素	li:first-child { font-weight: bold; }
:last-child	兄弟要素の中で最後の要素	li:last-child { border-bottom: none; }
:nth-child(n)	兄弟要素の中でn番目の要素	li:nth-child(2n) { background: #eee; } （偶数番目）
:only-child	親要素の中で唯一の子要素である場合	p:only-child { font-style: italic; }
:first-of-type	同じ種類の要素の中で最初の要素	p:first-of-type { text-indent: 1em; }
:nth-of-type(n)	同じ種類の要素の中でn番目の要素	img:nth-of-type(3) { margin-top: 20px; }

n の書き方:

• n または n+B: 全ての要素（またはB番目から全て）
• 2n: 偶数番目 (even とも書けます)
• 2n+1: 奇数番目 (odd とも書けます)
• 3n: 3の倍数番目

4. フォームの状態

フォーム要素（inputやcheckboxなど）の特定の状態に基づいてスタイルを適用します。

疑似クラス	用途	記述例
:checked	チェックボックスやラジオボタンがチェックされている時	input[type="checkbox"]:checked + label { color: green; }
:enabled	要素が有効な状態の時	input:enabled { opacity: 1.0; }
:disabled	要素が無効化されている時	input:disabled { background-color: #ddd; }
:required	必須入力フィールドの時	input:required { border-left: 5px solid red; }
:invalid	入力値が不正な状態の時（例: メールアドレス形式が違う）	input:invalid { background-color: #ffdddd; }

5. その他の重要な疑似クラス

疑似クラス	用途	記述例
:not(セレクタ)	引数内のセレクタに一致しない要素	p:not(.intro) { margin-top: 20px; } （.introクラスを持たないp要素）
:empty	子要素やテキストノードを持たない要素	div:empty { height: 10px; background: red; }
:target	URLのフラグメント（#以降）で指定されている要素	h2:target { background-color: yellow; }

---

まとめ

CSSの疑似クラスは、マークアップを変更することなく、要素の状態や位置といった条件に応じてスタイルを柔軟に制御できる強力なツールです。

• ユーザー操作に応じたインタラクティブな表現（:hover, :active, :focus）
• リストやテーブルなどでの装飾の効率化（:nth-child, :first-of-type）
• フォームの検証や状態の視覚化（:checked, :invalid, :required）

これらを活用することで、よりリッチで使いやすいウェブサイトを構築できます。