擬似クラス
CSS の擬似クラス (pseudo-classes) は、セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。例えば、擬似クラス :hover を使用すると、ユーザーのポインターがボタンの上に乗ったときにボタンを選択し、この選択されたボタンをスタイル設定することができます。
/* ユーザーのポインターが乗っているすべてのボタン */
button:hover {
color: blue;
}
擬似クラスはコロン (:) の後に擬似クラス名が続きます（例えば :hover）。関数形式の擬似クラスは、引数を定義するために括弧のペアも持ちます（例えば :dir()）。擬似クラスが装着されている要素（例えば button:hover の場合は button）はアンカー要素として定義されます。
擬似クラスにより、文書ツリーのコンテンツに関するものだけでなく、閲覧履歴（例えば :visited）、内容物の状態（例えばフォーム要素における :checked）、マウスポインターの位置（例えばマウスポインターが要素上にあるかを知ることができる :hover）といった外的要因との関係についてスタイルを適用することができるようになります。
メモ: 擬似クラスとは対照的に、擬似要素は要素の特定の部分にスタイルを適用するために使います。
表示状態擬似クラス
これらの擬似クラスにより、表示状態に基づいて要素を選択することができます。
:fullscreen-
現在全画面モードの要素に一致します。
:modal-
操作が終了するまで、その外の要素への操作をすべて排除する状態にある要素に一致します。
:picture-in-picture-
現在ピクチャインピクチャモードの要素に一致します。
入力擬似クラス
これらの擬似クラスはフォーム要素に関連し、 HTML 属性を操作する前後のフィールドの状態に基づいて要素を選択できるようにします。
:autofill-
<input>をブラウザーが自動補完した場合に一致します。 :enabled-
ユーザーインターフェイス要素が有効な状態であることを表します。
:disabled-
ユーザーインターフェイス要素が無効な状態であることを表します。
:read-only-
ユーザーが変更できない要素を表します。
:read-write-
ユーザーが編集することができる要素を表します。
:placeholder-shown-
プレイスホルダーテキスト、例えば
placeholder属性のものが表示されている<input>および<textarea>要素に一致します。 :default-
一連の要素のうち、1 つ以上の既定の UI 要素に一致します。
:checked-
チェックボックスやラジオボタンなどがオンになっている要素に一致します。
:indeterminate-
UI 要素が不定状態になっている場合に一致します。
:blank-
ユーザーが入力する要素が空である場合に一致します。空文字列が入っているか、その他の空入力であることを表します。
:valid-
内容が妥当である要素に一致します。例えば、 'email' 型の入力要素で、有効なフォームのメールアドレスを格納したもの、またはコントロールが必須ではない場合は空の値を格納したものです。
:invalid-
無効な内容を持つ要素に一致します。例えば、'email' 型の入力要素に名前が入力されている場合です。
:in-range-
スライダーコントロールなどの範囲制限のある要素で、選択した値が許容範囲内にある場合に適用されます。
:out-of-range-
スライダーコントロールなどの範囲制限のある要素で、選択した値が許容範囲外の場合に適用されます。
:required-
フォーム要素が必須項目である場合に一致します。
:optional-
フォーム要素が省略可能である場合に一致します。
:user-valid-
正しく入力された要素を表します。ただし、ユーザーがその要素を操作した場合のみです。
:user-invalid-
不正確な値が入力されている要素を表します。ただし、ユーザーがその要素を操作した場合のみです。
言語擬似クラス
これらの擬似クラスは、文書の言語を反映し、言語や書字方向に基づいた要素を選択できるようにします。
位置擬似クラス
これらの擬似クラスは、リンクと、現在の文書内の対象となる要素に関連しています。
:any-link:link-
まだ訪問していないリンクに一致します。
:visited-
訪問したことのあるリンクに一致します。
:local-link-
絶対 URL が対象 URL と同じリンク、例えば同じページへのアンカーリンクである場合に一致します。
:target-
文書の URL の対象である要素に一致します。
:target-within-
文書の URL の対象である要素だけでなく、文書 URL の対象である子孫を持つ要素にも一致します。
:scope-
セレクターを照合するための参照点となる要素を表します。
リソース状態擬似クラス
これらの擬似クラスは、動画など再生と表現できる状態にあるメディアに適用されます。
時間軸擬似クラス
これらの擬似クラスは、 WebVTT キャプショントラックのようなタイミングを持つものを閲覧する際に適用されるものです。
ツリー構造擬似クラス
これらの擬似クラスは、文書ツリー内の要素の位置に関するものです。
:root-
文書のルートである要素を表します。 HTML では、ふつうは
<html>要素です。 :empty-
ホワイトスペース文字以外に子がない要素を表します。
:nth-child-
An+Bの表記を用いて、兄弟要素のリストから要素を選択します。 :nth-last-child-
An+Bの表記を用いて、兄弟要素のリストから、リストの末尾から逆方向に数えて要素を選択します。 :first-child-
兄弟のうちの最初の要素に一致します。
:last-child-
兄弟のうちの最後の要素に一致します。
:only-child-
要素に兄弟がいない場合に一致します。例えば、リスト内に他のリスト項目が存在しないリスト項目が該当します。
:nth-of-type-
An+Bの表記を用いて、兄弟要素のリストから、特定の型に一致する要素を選択します。 :nth-last-of-type-
An+Bの表記を用いて、兄弟要素のリストから、リストの末尾から逆方向に数えて特定の型に一致する要素を選択します。 :first-of-type-
兄弟のうちの最初の特定の型に一致する要素に一致します。
:last-of-type-
兄弟のうちの最後の特定の型に一致する要素に一致します。
:only-of-type-
指定された型セレクターで兄弟要素がない要素に一致します。
ユーザー操作擬似クラス
これらの擬似クラスは、マウスポインターを要素にかざすなど、ユーザーによる何らかの操作を必要とするものです。
:hover-
ユーザーがポインティングデバイスでアイテムを指した場合（例えば、マウスポインターをその項目にかざした場合）に一致します。
:active-
アイテムがクリックされるなど、ユーザーによってアクティブになっているときに一致します。
:focus-
要素にフォーカスがあるときに一致します。
:focus-visible-
要素にフォーカスがあり、ユーザーエージェントがその要素のフォーカスを可視化する必要があると判断した場合に一致します。
:focus-within
関数擬似クラス
セレクターリストまたは寛容なセレクターリストを引数として受け取る擬似クラスです。
構文
selector:pseudo-class {
property: value;
}
通常のクラスと同様に、セレクターの中で好きなだけ擬似クラスを連結することができます。
アルファベット順の索引
CSS の一連の仕様書で定義されている擬似クラスには、以下のようなものがあります。
A
B
:blankExperimental
C
D
E
F
:first:first-child:first-of-type:focus:focus-visible:focus-within:fullscreen:futureExperimental
H
:has()Experimental:host:host():host-context()Experimental:hover
I
L
:lang():last-child:last-of-type:left:link:local-linkExperimental
M
N
O
P
:pastExperimental:paused:picture-in-picture:placeholder-shown:playing
R
S
T
:target:target-withinExperimental
U
:user-invalidExperimental
V
W
仕様書
| Specification |
|---|
| HTML # pseudo-classes |
| Selectors Level 4 |
| CSS Scoping Module Level 1 |
| CSS Paged Media Module Level 3 |