CSSで2023年1月現在、主要ブラウザで使える疑似要素・擬似クラス一覧サンプルコードの紹介をしています。
全般
::before
:before: 要素の前にコンテンツを挿入し、それに対してスタイルを適用します。
element:before {}::after
:afterは要素の後にコンテンツを挿入し、それに対してスタイルを適用します。
element::after {}:hover
:hoverはマウスカーソルが要素の上に乗った時にスタイルを適用します。
element:hover {}:visited
:visitedは要素が既に訪問された時に適用するスタイルを適用します。
element:visited {}:target
:targetは指定された要素に対して適用するスタイルを適用します。
element::target {}:selection
selectionは範囲選択中のテキストに対してスタイルを適用します。
element::selection {}:first-child
:first-childは最初の要素に対してスタイルを適用します。
element:first-child {}:first-of-type
同じ親を持つ同じ種類の要素の中で最初の要素に対してスタイルを適用します。
element:first-of-type {}::first-letter
:first-letterは要素の最初の文字に対してスタイルを適用します。
element::first-letter {}::first-line
:first-lineは要素の最初の行に対してスタイルを適用します。
element::first-line {}:empty
:emptyはテキストを含め子を持たない要素に対してスタイルを適用します。
element:active {}リンクタグ関連
:active
activeは要素がクリックされた時にスタイルを適用します。
例えばbutton要素などを押し下げた時に反映されます。
element:active {}:link
:linkは要素が未訪問のリンクだった時に適用するスタイルです。
element:link {}:any-link
全ての<a> または <area> を持つリンクに対してスタイルを適用します。
element:any-link {}フォームパーツ関連
:focus
:focusはフォーム要素がフォーカスされた時（選択された時）にスタイルを適用します。
element:focus {}:checked
:checked: 要素がチェックされた時にスタイルを適用します。
element:checked {}:disabled
:disabledは要素が無効な状態の時にスタイルを適用します。
element:disabled {}:enabled
:enabledは要素が有効な状態の時にスタイルを適用します。
element:enabled {}特殊
:fullscreen
:fullscreenは全画面モード状態にある要素すべてにスタイルを適用します。
element:fullscreen {}:has()
:has()は引数として渡された値に一致する要素に対してスタイルを適用します。
サンプルコードでは、要素の中で <img>を子要素に持つものに対して反映されます。
element:has(> img) {}:is()
:is()は引数として渡された要素に一致する要素に対してスタイルを適用します。
引数はカンマ区切りで複数指定可能です。
サンプルコードでは、要素の中で <heder>または<footer>の中の<p>要素に対して反映されます。
:is(heder,footer) p {}:lang()
:lang()は引数として渡された言語に一致するテキスト要素にスタイルを適用します。
引数はカンマ区切りで複数指定可能です。
p:lang(en){ /* 英語に対して有効 */ }
p:lang(ja){ /* 日本語に対して有効 */ }:not()
:not()は引数として渡された値と一致する要素を除外した要素にスタイルを適用します。
引数はカンマ区切りで複数指定可能です。
p:not(.class){ /* .classを持つpを除外した要素 */ }
p:not(span){ /* spanを持つpを除外した要素 */ }