擬似要素

CSS の 擬似要素 (Pseudo-elements) は、セレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。

構文

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

例えば ::first-line 擬似要素は、段落の最初の行のフォントを変更するために使用することができます。

css
/* すべての <p> 要素の最初の行です。 */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

擬似要素にはダブルコロン (::) を使用します。これは、単一のコロン (:) を使用する擬似クラスと区別するためです。

1つのセレクターで使用できる擬似要素は1つだけです。擬似要素が現れる場所は、それが現れる複雑セレクターまたは複合セレクター内の他のすべての要素の後でなければなりません。例えば、段落の最初の行は p::first-line を使用して選択することができますが、最初の行の子やポインターが当たっている最初の行は選択できません。つまり、 p::first-line > * と p::first-line:hover はどちらも無効です。

擬似要素を使用して、状態に基づいて要素を選択することはできませんが、擬似要素を使用して、すでに状態が適用されている要素の一部を選択してスタイル設定することはできます。例えば、 p:hover::first-line は、段落自体にポインターが当たっているとき（擬似クラス）に、段落の最初の行（擬似要素）を選択します。

メモ: セレクターリストに無効なセレクターが含まれている場合、そのスタイルブロック全体が無効になります。

擬似要素の一覧

CSS の一連の仕様で定義される擬似要素には、以下のようなものがあります。

A

B

C

F

G

M

P

S

T

メモ: ブラウザーは元の 4 つの擬似要素、 ::before、::after、::first-line、::first-letter のみで単一コロンの構文に対応しています。

仕様書

Specification
CSS Pseudo-Elements Module Level 4
CSS Positioned Layout Module Level 4
CSS Shadow Parts
WebVTT: The Web Video Text Tracks Format

関連情報