擬似クラス

CSS の擬似クラス (pseudo-classes) は、セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。例えば、擬似クラス :hover を使用すると、ユーザーのポインターがボタンの上に乗ったときにボタンを選択し、この選択されたボタンをスタイル設定することができます。

css
/* ユーザーのポインターが乗っているすべてのボタン */
button:hover {
  color: blue;
}

擬似クラスはコロン (:) の後に擬似クラス名が続きます（例えば :hover）。関数形式の擬似クラスは、引数を定義するために括弧のペアも持ちます（例えば :dir()）。擬似クラスが装着されている要素（例えば button:hover の場合は button）はアンカー要素として定義されます。

擬似クラスにより、文書ツリーのコンテンツに関するものだけでなく、閲覧履歴（例えば :visited）、内容物の状態（例えばフォーム要素における :checked）、マウスポインターの位置（例えばマウスポインターが要素上にあるかを知ることができる :hover）といった外的要因との関係についてスタイルを適用することができるようになります。

メモ: 擬似クラスとは対照的に、擬似要素は要素の特定の部分にスタイルを適用するために使います。

表示状態擬似クラス

これらの擬似クラスにより、表示状態に基づいて要素を選択することができます。

:fullscreen

現在全画面モードの要素に一致します。

操作が終了するまで、その外の要素への操作をすべて排除する状態にある要素に一致します。

:picture-in-picture

現在ピクチャインピクチャモードの要素に一致します。

入力擬似クラス

これらの擬似クラスはフォーム要素に関連し、 HTML 属性を操作する前後のフィールドの状態に基づいて要素を選択できるようにします。

:autofill

をブラウザーが自動補完した場合に一致します。

:enabled

ユーザーインターフェイス要素が有効な状態であることを表します。

:disabled

ユーザーインターフェイス要素が無効な状態であることを表します。

:read-only

ユーザーが変更できない要素を表します。

:read-write

ユーザーが編集することができる要素を表します。

:placeholder-shown

プレイスホルダーテキスト、例えば placeholder 属性のものが表示されている および