擬似要素

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

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

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

擬似要素にはダブルコロン (::) を使用します。これは、単一のコロン (:) を使用する擬似クラスと区別するためです。なお、ブラウザーは、当初の 4 つの擬似要素（::before、::after、::first-line、::first-letter）に対して単一のコロンの構文に対応しています。

擬似要素は独立して存在しません。擬似要素が属する要素は、その擬似要素の「対象要素」と呼ばれます。擬似要素が現れる場所は、それが現れる複雑セレクターまたは複合セレクター内の他のすべての要素の後でなければなりません。セレクターの最後の要素は、擬似要素の対象要素です。例えば、p::first-line を使用して段落の最初の行を選択することはできますが、最初の行の子要素は選択できません。したがって、p::first-line > * は不正です。

擬似要素は、対象要素の現在の状態に基づいて選択することができます。例えば、p:hover::first-line は、段落自体にカーソルが置かれているとき（擬似クラス）、その段落の最初の行（擬似要素）を選択します。

::first-line

対象要素の最初の行ボックスです。

::first-letter

対象要素の最初の行の最初の文字、数値、または記号文字です。

::cue

選択した要素内の WebVTT キュー。 これは、VTT 予定があるメディアでキャプションや他のキューのスタイル設定を行うために使用することができます。 CSS 擬似要素モジュールでは、::postfix および ::prefix サブ擬似要素も定義されています。これらは、どのブラウザーでもまだ対応していません。

コンテンツおよび文書の状態に基づいて文書の一部を選択し、その領域に異なるスタイルを設定して、その状態をユーザーに示すことができます。

::selection

文書内の選択された部分。

::target-text

文書の対象要素。対象要素は、URL のフラグメント識別子を使用して識別されます。

::spelling-error

ブラウザーがスペルミスであると判断した部分のテキストです。

::grammar-error

ブラウザーが文法的に間違っていると判断した部分のテキストです。

::highlight()

強調表示レジストリー内の要素。独自の強調表示を作成するために使用されます。

これらの擬似要素は、通常の要素と同様に動作し、ボックスモデルにシームレスに組み込まれます。これらは、対象要素の階層内で直接スタイル設定できる子要素として機能します。

::before

選択した要素の最初の子である擬似要素を作成します。

::after

選択した要素の最後の子である擬似要素を作成します。

::column

段組みレイアウト のそれぞれの段のフラグメントです。

::marker

リストアイテムの自動的に生成されるマーカーボックスです。

::backdrop

最上位レイヤーでレンダリングされた対象要素の背景。

::scroll-button()

適用先のスクロールコンテナーのスクロールを制御できるボタンを作成します。

::scroll-marker

スクロールマーカーである擬似要素を作成します。これは、スクロールマーカーグループに組み込まれた、その対象要素のスクロールターゲットボタンです。

::scroll-marker-group

要素またはその子孫で生成される ::scroll-marker 擬似要素を抑制するためのコンテナーを、スクロールコンテナーの前または後に生成します。

これらの擬似要素は、それ以外では選択できない実際の要素です。

::details-content

<details> 要素の展開/折りたたみ可能なコンテンツです。

::part()

シャドウツリー内に、一致する part 属性を持つ要素です。

::slotted()

HTML テンプレート内のスロットに配置された要素です。

この擬似要素は、フォームコントロールに関連しています。

::checkmark

カスタマイズ可能な選択要素 の現在選択されている <option> 要素内に配置されたチェックマークを対象とし、どれが選択されているかを視覚的に示します。

::file-selector-button

<input> の type="file" のボタンです。

::picker()

要素のピッカー部分、例えばカスタマイズ可能な選択要素のドロップダウンピッカーです。

::picker-icon

アイコンが関連付けられているフォームコントロール内のピッカーアイコン。カスタマイズ可能な選択要素 の場合、選択が閉じられているときに下向きの矢印を選択します。

::placeholder

入力フィールドのプレースホルダーテキストです。

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

A

• ::after

B

• ::backdrop
• ::before

C

• ::column
• ::checkmark
• ::cue （および ::cue()）

D

• ::details-content

F

• ::file-selector-button
• ::first-letter
• ::first-line

G

• ::grammar-error

H

• ::highlight()

M

• ::marker

P

• ::part()
• ::picker()
• ::picker-icon
• ::placeholder

S

• ::scroll-button()
• ::scroll-marker
• ::scroll-marker-group
• ::selection
• ::slotted()
• ::spelling-error

T

• ::target-text

V

• ::view-transition
• ::view-transition-image-pair()
• ::view-transition-group()
• ::view-transition-new()
• ::view-transition-old()

いくつかの擬似要素セレクターを連結して、他の擬似要素の中に入れ子になった擬似要素のスタイルを設定することができます。次の入れ子になった擬似要素の組み合わせに対応しています。

• ::after
  • ::after::marker: ::after 擬似要素が display: list-item でリストアイテムとしてスタイル設定されている場合、::after 擬似要素の ::marker 擬似要素を選択します。
• ::before
  • ::before::marker: ::before 擬似要素が display: list-item でリストアイテムとしてスタイル設定されている場合、::before 擬似要素の ::marker 擬似要素を選択します。

例やブラウザーの互換性情報については、個々の擬似要素のリファレンスページをご覧ください。

• CSS 擬似要素モジュール
• 擬似クラス
• CSS セレクターモジュール
• CSS 構成要素: 擬似クラスと擬似要素