概要
CSS の疑似クラスはセレクタに付加するキーワードであり、選択される要素に対して特定の状態を指定します。例えば :hover 疑似クラスは、選択した要素上にマウスカーソルがあるときにスタイルを適用します。
疑似クラスは疑似要素とともに、ドキュメントツリーのコンテンツの関係だけでなく、閲覧履歴 (例えば :visited)、コンテンツの状態 (例えばフォーム要素における :checked)、マウスカーソルの位置 (例えばマウスカーソルが要素上にあるかを知ることができる :hover) といった外的要因との関係についてスタイルを適用することを可能にします。
構文
selector:pseudo-class {
property: value;
}
標準疑似クラスの索引
:active:any:checked:default:dir():disabled:empty:enabled:first:first-child:first-of-type:fullscreen:focus:hover:indeterminate:in-range:invalid:lang():last-child:last-of-type:left:link:not():nth-child():nth-last-child():nth-last-of-type():nth-of-type():only-child:only-of-type:optional:out-of-range:read-only:read-write:required:right:root:scope:target:valid:visited
仕様書
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| Fullscreen API | 現行の標準 | :fullscreen を定義。 |
| WHATWG HTML Living Standard | 現行の標準 | HTML5 から変更なし。 |
| 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 | 勧告 | :link, :visited, :active, :enabled, :disabled, :checked, :indeterminate について、HTML における意味論的な意味を定義。:default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, :read-write, :dir() を定義。 |
| 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 を定義。ただし意味論的な意味は定義していません。 |