擬似クラス

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

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

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

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

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

表示状態擬似クラス

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

:fullscreen

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

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

: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-invalid

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

言語擬似クラス

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

:dir()

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

:lang()

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

位置擬似クラス

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

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

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

:visited

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

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

:target

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

:target-within (en-US)

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

:scope

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

リソース状態擬似クラス

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

:playing

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

:paused

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

時間軸擬似クラス

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

:current (en-US)

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

:past (en-US)

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

:future (en-US)

完全に :current (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

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

ユーザー操作擬似クラス

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

:hover

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

:active

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

:focus

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

:focus-visible

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

:focus-within

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

関数擬似クラス

セレクターリストまたは寛容なセレクターリストを引数として受け取る擬似クラスです。

:is()

matches-any 擬似クラスは、指定されたリストのセレクターのどれかに一致する要素に一致します。リストは寛容です。

:not()

否定 (matches-none) 擬似クラスは、引数で表されない要素を表します。

:where()

詳細度を調整する擬似クラスは、指定されたリストのセレクターのいずれかに一致する要素であれば、詳細度の重みを追加することなく照合します。リストは寛容です。

:has()

関係擬似クラスは、付属の要素に対してアンカーを付けたときに、相対セレクターのどれかが一致する場合に要素を表します。

構文

css
selector:pseudo-class {
  property: value;
}

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

アルファベット順の索引

仕様書

Specification
HTML Standard
# pseudo-classes
Selectors Level 4
CSS Basic User Interface Module Level 4

関連情報