擬似クラス

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

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

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

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

言語擬似クラス

これらの擬似クラスは、文書の言語を反映し、言語や書字方向に基づいた要素を選択できるようにします。

:dir

方向性擬似クラスは、文書の言語によって決定される書字方向に基づいて要素を選択します。

:lang

内容物の言語に基づいて要素を選択します。

位置擬似クラス

これらの擬似クラスは、リンクと、現在の文書内の対象となる要素に関連しています。

:any-link

要素が :link または :visited のいずれかに一致する場合に一致します。

:link

まだ訪問していないリンクに一致します。

:visited

訪問したことのあるリンクに一致します。

:local-link (en-US)

絶対 URL が対象 URL と同じリンク、例えば同じページへのアンカーリンクである場合に一致します。

:target

文書の URL の対象である要素に一致します。

:target-within (en-US)

文書の URL の対象である要素だけでなく、文書 URL の対象である子孫を持つ要素にも一致します。

:scope

セレクターを照合するための参照点となる要素を表します。

ユーザー操作擬似クラス

これらの擬似クラスは、マウスポインターを要素にかざすなど、ユーザーによる何らかの操作を必要とするものです。

:hover

ユーザーがポインティングデバイスでアイテムを指した場合(例えば、マウスポインターをその項目にかざした場合)に一致します。

:active

アイテムがクリックされるなど、ユーザーによってアクティブになっているときに一致します。

:focus

要素にフォーカスがあるときに一致します。

:focus-visible

要素にフォーカスがあり、ユーザーエージェントがその要素のフォーカスを可視化する必要があると判断した場合に一致します。

:focus-within

:focus が適用される要素に加え、 :focus が適用される子孫要素を持つ要素にも一致します。

時間軸擬似クラス

これらの擬似クラスは、 WebVTT キャプショントラックのようなタイミングを持つものを閲覧する際に適用されるものです。

:current (en-US)

表示されている要素またはその祖先を表します。

:past (en-US)

完全に :current (en-US) 要素の前に発生する要素を表します。

:future (en-US)

完全に :current (en-US) 要素の後に発生する要素を表します。

リソース状態擬似クラス

これらの擬似クラスは、動画など再生と表現できる状態にあるメディアに適用されます。

:playing (en-US)

その要素が再生可能なメディア要素であり、再生中であることを表します。

:paused (en-US)

その要素が再生可能なメディア要素であり、一時停止中であることを表します。

入力擬似クラス

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

:autofill

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

:enabled

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

:disabled

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

:read-only

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

:read-write

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

:placeholder-shown

プレイスホルダーテキスト、例えば HTML5 の placeholder 属性のものが表示されている入力要素に一致します。

:default

一連の要素のうち、1 つ以上の既定の UI 要素に一致します。

:checked

チェックボックスやラジオボタンなどがオンになっている要素に一致します。

:indeterminate

UI 要素が不定状態になっている場合に一致します。

:blank

ユーザーが入力する要素が空である場合に一致します。空文字列が入っているか、その他の空入力であることを表します。

:valid

内容が妥当である要素に一致します。例えば、 'email' 型の入力要素に正しい形式のメールアドレスが入力されている場合です。

:invalid

無効な内容を持つ要素に一致します。例えば、'email' 型の入力要素に名前が入力されている場合です。

:in-range

スライダーコントロールなどの範囲制限のある要素で、選択した値が許容範囲内にある場合に適用されます。

:out-of-range

スライダーコントロールなどの範囲制限のある要素で、選択した値が許容範囲外の場合に適用されます。

:required

フォーム要素が必須項目である場合に一致します。

:optional

フォーム要素が省略可能である場合に一致します。

:user-invalid (en-US)

不正確な値が入力されている要素を表します。ただし、ユーザーがその要素を操作した場合のみです。

ツリー構造擬似クラス

これらの擬似クラスは、文書ツリー内の要素の位置に関するものです。

: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

指定された型セレクターで兄弟要素がない要素に一致します。

構文

selector:pseudo-class {
  property: value;
}

通常のクラスと同様に、セレクターの中で好きなだけ擬似クラスを連結することができます。

アルファベット順の索引

CSS の一連の仕様書で定義されている擬似クラスには、以下のようなものがあります。

A

B

C

D

E

F

H

I

L

N

O

P

R

S

T

U

V

W

仕様書

仕様書 状態 備考
Fullscreen API 現行の標準 :fullscreen を定義。
HTML Living Standard 現行の標準 特定のセレクターがいつ HTML 要素に一致するのかを定義。
Selectors Level 4 草案 :any-link, :blank, :local-link, :scope, :drop, :current, :past, :future, :placeholder-shown, :user-invalid, :nth-col(), :nth-last-col(), :is(), :where() を定義。 :empty:-moz-only-whitespace  のように動作するように変更。 Selectors Level 3 および HTML5 で定義されたその他の擬似クラスには目立った変更なし(意味論的な意味は引き継いでいない)。
HTML5 勧告 正規の (WHATWG) HTML 仕様書から関連する節を複写。
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 を定義。ただし意味論的な意味は定義なし。

関連情報