CSS の疑似クラスはセレクターに付加するキーワードであり、選択された要素対して特定の状態を指定します。例えば :hover 疑似クラスで、ユーザーがマウスポインタを当てたときにボタンの色を変更することができます。
div:hover {
background-color: #F89B4D;
}
疑似クラスにより、文書ツリーのコンテンツに関するものだけでなく、閲覧履歴（例えば :visited）、コンテンツの状態（例えばフォーム要素における :checked）、マウスポインタの位置（例えばマウスポインタが要素上にあるかを知ることができる :hover）といった外的要因との関係についてスタイルを適用することができるようになります。
メモ: 疑似クラスとは対照的に、 pseudo-elements は要素の特定の部分にスタイルを適用するために使用します。
構文
selector:pseudo-class {
property: value;
}
通常のクラスと同様に、必要であれば1つのセレクターに複数の疑似クラスを並べることができます。
標準疑似クラスの索引
:active:any:any-link:checked:default:defined:dir():disabled:empty:enabled:first:first-child:first-of-type:fullscreen:focus:host:host():host-context():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 を定義。 |
| 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 を定義。ただし意味論的な意味は定義していません。 |