擬似クラス
CSS の擬似クラス (pseudo-classes) は、セレクターに付加するキーワードであり、選択された要素の特定の状態など、文書ツリー外の情報に基づいて要素を選択することを可能にします。例えば、擬似クラス :hover を使用すると、ユーザーのポインターがボタン上にかざされた際にスタイルを設定できます。
/* ユーザーのポインターが乗っているすべてのボタン */
button:hover {
color: blue;
}
擬似クラスはコロン (:) の後に擬似クラス名が続きます（例えば :hover）。関数形式の擬似クラスは、引数を定義するために括弧のペアも持ちます（例えば :dir()）。擬似クラスが装着されている要素（例えば button:hover の場合は button）はアンカー要素として定義されます。
擬似クラスにより、文書ツリーのコンテンツに関するものだけでなく、閲覧履歴（例えば :visited）、内容物の状態（例えばフォーム要素における :checked）、マウスポインターの位置（例えばマウスポインターが要素上にあるかを知ることができる :hover）といった外的要因との関係についてスタイルを適用することができるようになります。
メモ: 擬似クラスとは対照的に、擬似要素は要素の特定の部分にスタイルを適用するために使います。
要素擬似クラス
これらの擬似クラスは要素の中核的な特性に関連します。
要素表示状態擬似クラス
これらの擬似クラスにより、表示状態に基づいて要素を選択することができます。
:open-
開いたり閉じたりできる要素が、現在開いているときに一致します。
:popover-open-
ポップオーバー要素が現在表示中の状態であるときに一致します。
:modal-
操作が終了するまで、その外の要素への操作をすべて排除する状態にある要素に一致します。
:fullscreen-
現在全画面モードの要素に一致します。
:picture-in-picture-
現在ピクチャインピクチャモードの要素に一致します。
入力擬似クラス
これらの擬似クラスはフォーム要素に関連し、 HTML 属性を操作する前後のフィールドの状態に基づいて要素を選択できるようにします。
:enabled-
ユーザーインターフェイス要素が有効な状態であることを表します。
:disabled-
ユーザーインターフェイス要素が無効な状態であることを表します。
:read-only-
ユーザーが変更できない要素を表します。
:read-write-
ユーザーが編集することができる要素を表します。
:placeholder-shown-
プレイスホルダーテキスト、例えば
placeholder属性のものが表示されている<input>および<textarea>要素に一致します。 :autofill-
<input>をブラウザーが自動補完した場合に一致します。 :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 の対象である要素に一致します。
:scope-
セレクターを照合するための参照点となる要素を表します。
メモ:
:target-within 擬似クラスは、文書 URL の対象である子孫を持つ要素にも一致するものとして定義されていましたが、仕様書から削除されました。この目的には :has(:target) を使用してください。
リソース状態擬似クラス
これらの擬似クラスは、動画など再生と表現できる状態にあるメディアに適用されます。
:playing-
再生可能な要素が再生中であることを表します。
:paused-
再生可能な要素が一時停止中であることを表します。
:seeking-
再生可能な要素が現在メディアリソース内で再生位置を検索している状態を表します。
:buffering-
再生可能な要素が再生中であるものの、メディアリソースをダウンロードしているため一時的に停止している状態を表します。
:stalled-
再生可能な要素が再生中であるが、メディアリソースをダウンロードできないため停止している状態を表します。
:muted-
音を出力する要素がミュートされている状態を表します。
:volume-locked-
音を出力する要素が、ブラウザーによって音量レベルを固定されている状態を表します。
時間軸擬似クラス
これらの擬似クラスは、WebVTT キャプショントラックのようなタイミングを持つものを閲覧する際に適用されるものです。
ツリー構造擬似クラス
これらの擬似クラスは、文書ツリー内の要素の位置に関するものです。
:root-
文書のルートである要素を表します。HTML では、ふつうは
<html>要素です。 :empty-
ホワイトスペース文字以外に子がない要素を表します。
:nth-child()-
An+Bの表記を用いて、兄弟要素のリストから要素を選択します。 :nth-last-child()-
An+Bの表記を用いて、兄弟要素のリストから、リストの末尾から逆方向に数えて要素を選択します。 :first-child-
兄弟のうちの最初の要素に一致します。
:last-child-
兄弟のうちの最後の要素に一致します。
:only-child-
要素に兄弟がいない場合に一致します。例えば、リスト内に他のリスト項目が存在しないリスト項目が該当します。
:heading()-
An+Bの表記を用いて、見出し要素 (<h1>-<h6>) を選択します。 :nth-of-type()-
An+Bの表記を用いて、兄弟要素のリストから、特定の型に一致する要素を選択します。 :nth-last-of-type()-
An+Bの表記を用いて、兄弟要素のリストから、リストの末尾から逆方向に数えて特定の型に一致する要素を選択します。 :first-of-type-
兄弟のうちの最初の特定の型に一致する要素に一致します。
:last-of-type-
兄弟のうちの最後の特定の型に一致する要素に一致します。
:only-of-type-
指定された型セレクターで兄弟要素がない要素に一致します。
シャドウ構造擬似クラス
これらの擬似クラスはシャドウ DOM に関連します。
:host-
シャドウツリーのシャドウホストに一致します。
:host()-
:hostに一致する要素で、指定されたリスト内のいずれかのセレクターに一致するものに一致します。 :host-context()-
シャドウホストのコンテキストにおいて、シャドウツリー外の要素を選択します。
:has-slotted-
コンテンツが割り当てられたスロット要素に一致します。
ユーザー操作擬似クラス
これらの擬似クラスは、マウスポインターを要素にかざすなど、ユーザーによる何らかの操作を必要とするものです。
:hover-
ユーザーがポインティングデバイスでアイテムを指した場合（例えば、マウスポインターをそのアイテムにかざした場合）に一致します。
:active-
アイテムがクリックされるなど、ユーザーによってアクティブになっているときに一致します。
:focus-
要素にフォーカスがあるときに一致します。
:focus-visible-
要素にフォーカスがあり、ユーザーエージェントがその要素のフォーカスを可視化する必要があると判断した場合に一致します。
:focus-within:target-current-
現在スクロール中である
::scroll-markerのscroll-marker-group擬似要素、つまりアクティブなスクロールマーカーに一致します。
関数擬似クラス
セレクターリストまたは寛容なセレクターリストを引数として受け取る擬似クラスです。
カスタム状態擬似クラス
これらの擬似クラスはカスタム要素に適用されます。
:state()-
指定されたカスタム状態を持つカスタム要素に一致します。
ページ擬似クラス
これらの擬似クラスは印刷された文書内のページに関連し、@page アットルールと共に使用されます。
ビュー遷移擬似クラス
これらの擬似クラスは、ビュー遷移に関わる要素に関連します。
:active-view-transition-
ビュー遷移が進行中 (active) のときに文書のルート要素に一致し、遷移が完了すると一致を停止します。
:active-view-transition-type()-
指定されたビュー遷移が進行中 (active) のときに文書のルート要素に一致し、遷移が完了すると一致を停止します。
構文
selector:pseudo-class {
property: value;
}
通常のクラスと同様に、セレクターの中で好きなだけ擬似クラスを連結することができます。
アルファベット順の索引
CSS の一連の仕様書で定義されている擬似クラスには、以下のようなものがあります。
A
B
:blank(input) Experimental:blank(page):buffering
C
D
E
F
H
I
L
:lang():last-child:last-of-type:left:link:local-linkExperimental
M
N
O
P
R
S
T
U
V
W
標準外の擬似クラス
標準外のベンダー接頭辞付き擬似クラスには次のものがあります。
-moz- 接頭辞
仕様書
| Specification |
|---|
| HTML # pseudo-classes |
| Selectors Level 4 |
| CSS Scope |
| CSS Paged Media Module Level 3 |