このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

“擬似クラス”とは?

記事Sep. 12th,2021
CSSのスタイルの適用対象を要素の状態などに応じて選択する擬似クラスについて。
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

CSSの擬似クラス

“擬似クラス”とは?

擬似クラス(Pseudo-classes)”単純セレクタの一種で、文書ツリーの構造に依らない情報によって要素を選択したり、他の単純セレクタでは表現するのが難しかったり、不可能だったりする要素の選択を表現するために使用されます。

特定の要素が擬似クラスに選択されるかどうかは動的に変化し、文書の構造が変わらなかったとしてもユーザーの操作によって要素は擬似クラスに選択されるようになったり、選択されなくなったりします。

擬似クラスはコロン(U+003A、“:”)に続く識別子である擬似クラス名で表されます。“関数擬似クラス(Functional pseudo-class)”である場合は直後に丸括弧(“(”と“)”)で囲まれた引数が続きます。

擬似クラス

擬似クラス名は英字の大文字と小文字は区別されません。また、コロンと擬似クラス名の間と擬似クラス名と関数擬似クラスの丸括弧の間にはホワイトスペースを挿入してはいけません。

擬似クラスは他の単純セレクタと同様に合成セレクタに含むことができます。合成セレクタタイプ・セレクタもしくは全称セレクタが含まれる場合には擬似クラスはそれよりも後に記述しなければなりません。

擬似クラスの一覧

論理結合

擬似クラス 説明
:is() セレクタ・リストの中のいずれかに一致する要素を選択
:not() セレクタ・リストの中のいずれにも一致しない要素を選択
:where()
:has()

要素

擬似クラス 説明
:defined

言語

擬似クラス 説明
:dir()
:lang()

位置

擬似クラス 説明
:any-link ハイパーリンクを選択
:link 未訪問のハイパーリンクを選択
:visited 訪問済のハイパーリンクを選択
:local-link
:target
:target-within
:scope

ユーザー操作

擬似クラス 説明
:hover ホバーされている要素を選択
:active アクティブ化されている要素を選択
:focus フォーカスされている要素を選択
:focus-visible
:focus-within フォーカスされているか子孫要素がフォーカスされている要素を選択

時間次元

擬似クラス 説明
:current
:past
:future

要素の表示状態

擬似クラス 説明
:open
:closed
:modal
:fullscreen
:picture-in-picture

リソース状態

擬似クラス 説明
:playing
:paused
:seeking
:buffering
:stalled
:muted
:volume-locked

入力

擬似クラス 説明
:enabled 有効化されている要素を選択
:disabled 無効化されている要素を選択
:read-only ユーザーが編集できない要素を選択
:read-write ユーザーが編集できる要素を選択
:placeholder-shown
:autofill
:default
:checked
:indeterminate
:blank
:valid 入力値が妥当な要素を選択
:invalid 入力値が妥当でない要素を選択
:in-range
:out-of-range
:required
:optional
:user-valid
:user-invalid

ツリー構造

擬似クラス 説明
:root 文書のルート要素を選択
:empty
:nth-child()
:nth-last-child()
:first-child
:last-child
:only-child
:nth-of-type()
:nth-last-of-type()
:first-of-type
:last-of-type
:only-of-type

グリッド構造

擬似クラス 説明
:nth-col()
:nth-last-col()
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク