CSS の疑似クラスは、セレクターに付加するキーワードであり、選択された要素対して特定の状態を指定します。例えば :hover 疑似クラスで、ユーザーのポインターが当たったときにボタンの色を変更することができます。
/* ユーザーのポインターが当たっているすべてのボタン */
button:hover {
color: blue;
}
疑似クラスにより、文書ツリーのコンテンツに関するものだけでなく、閲覧履歴 (例えば :visited)、コンテンツの状態 (例えばフォーム要素における :checked)、マウスポインタの位置 (例えばマウスポインタが要素上にあるかを知ることができる :hover) といった外的要因との関係についてスタイルを適用することができるようになります。
メモ: 疑似要素は疑似クラスとは対照的に、 pseudo-elements は要素の特定の部分にスタイルを適用するために使用します。
構文
selector:pseudo-class {
property: value;
}
通常のクラスと同様に、必要であれば1つのセレクターに複数の疑似クラスを並べることができます。
標準疑似クラスの索引
:active:any-link:blank:checked:current:default:defined:dir():disabled:drop:empty:enabled:first:first-child:first-of-type:fullscreen:future:focus:focus-visible:focus-within:has():host:host():host-context():hover:indeterminate:in-range:invalid:lang():last-child:last-of-type:left:link:local-link:matches():not():nth-child():nth-col():nth-last-child():nth-last-col():nth-last-of-type():nth-of-type():only-child:only-of-type:optional:out-of-range:past:placeholder-shown:read-only:read-write:required:right:root:scope:target:target-within:user-invalid:valid:visited
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| Fullscreen API | 現行の標準 | :fullscreen を定義。 |
| HTML Living Standard | 現行の標準 | いつ特定のセレクターが HTML 要素に一致するのかを定義。 |
| Selectors Level 4 | 草案 | :any-link, :local-link, :scope, :active-drop-target, :valid-drop-target, :invalid-drop-target, :current, :past, :future, :placeholder-shown, :user-error, :blank, :nth-match(), :nth-last-match(), :nth-column(), :nth-last-column(), :matches() を定義。Selectors Level 3 および HTML5 で定義された疑似クラスについて、大きな変更はなし (ただし意味論的な意味は引き継いでいません)。 |
| HTML5 | 勧告 | 正規の (WHATWG) HTML 仕様書から関連する節を複写。 |
| CSS Basic User Interface Module Level 3 | 勧告 | :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, :read-write を定義。ただし意味論的な意味は定義していません。 |
| Selectors Level 3 | 勧告 | :target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty, :not() を定義。:enabled, :disabled, :checked, :indeterminate の構文を定義。ただし意味論的な意味は定義していません。CSS Level 2 (Revision 1) で定義された疑似クラスについて、大きな変更はなし。 |
| CSS Level 2 (Revision 1) | 勧告 | :lang(), :first-child, :hover, :focus を定義。CSS Level 1 で定義された疑似クラスについて、大きな変更はなし。 |
| CSS Level 1 | 勧告 | :link, :visited, :active を定義。ただし意味論的な意味は定義していません。 |