疑似クラスとは何か、そして一般的なものは何か？

Question

Accepted Answer

**疑似クラス**（単一のコロン `:`）は、要素の**状態**または**位置**に基づいて要素を選択します。これはプレーンなクラスでは表現できないもの、例えば「ホバー中」や「最初の子要素」のようなものです。

## State pseudo-classes (インタラクション)

```css
a:hover    { color: blue; }      /* mouse is over it */
a:focus    { outline: 2px solid; } /* keyboard/tab focus — keep for accessibility! */
button:active   { transform: scale(0.98); } /* while being pressed */
button:disabled { opacity: 0.5; } /* disabled form controls */
input:checked   { } /* checked checkbox/radio */
input:focus-visible { } /* focus only when keyboard-navigating (not mouse) */
```

リンクの順序は重要です（LVHA）：`:link`、`:visited`、`:hover`、`:active`。

## Structural pseudo-classes (位置)

```css
li:first-child  { } /* first li among its siblings */
li:last-child   { } /* last one */
li:nth-child(2) { } /* the 2nd */
li:nth-child(odd)  { } /* 1st, 3rd, 5th... — zebra striping */
li:nth-child(3n)   { } /* every 3rd */
p:only-child    { } /* a p that's the sole child */
```

`:nth-child()` は強力です — `2n`（偶数）、`2n+1`（奇数）、`3n`（3つごと）など。

## Form & modern pseudo-classes

```css
input:required  { }
input:invalid   { border-color: red; }
:is(h1, h2, h3) { }  /* matches any — shortens selector lists */
.card:has(img)  { }  /* the "parent selector": a card that CONTAINS an img */
:not(.active)   { }  /* everything except .active */
```

## Pseudo-class vs pseudo-element

疑似クラスは**1つ**のコロンを使用します（`:hover`、*状態*）。疑似要素は**2つ**使用します（`::before`、*生成された部分*）。混同しないでください。

## なぜ重要なのか

疑似クラスは、追加のマークアップや JavaScript なしで、インタラクション（hover/focus — 使いやすくアクセス可能な UI に必須）と構造（ストライピング、first/last）をスタイル化できます。

モダンなもの（`:has`、`:is`、`:focus-visible`）は、以前は JS または繰り返しセレクタが必要だった問題を解決します。