擬似要素

構文

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 サブ擬似要素も定義しています。これらは、どのブラウザーでもまだ対応していません。

ハイライト擬似要素

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

::grammar-error

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

::highlight()

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

::search-text

ユーザーエージェントの「検索」または「ページ内検索」テキスト検索機能によって特定された検索結果です。

::selection

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

::spelling-error

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

::target-text

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

ツリー構造準拠擬似要素

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

::before

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

::after

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

::column

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

::marker

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

::backdrop

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

::scroll-button()

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

::scroll-marker

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

::scroll-marker-group

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

要素に属する擬似要素

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

::details-content

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

::part()

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

::slotted()

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

フォーム関連擬似要素

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

::checkmark

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

::file-selector-button

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

::picker()

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

::picker-icon

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

::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()

標準外の擬似要素

標準外のベンダー接頭辞付き擬似要素には次のものがあります。

-moz- 接頭辞

• ::-moz-color-swatch
• ::-moz-focus-inner
• ::-moz-list-bullet
• ::-moz-list-number
• ::-moz-meter-bar
• ::-moz-progress-bar
• ::-moz-range-progress
• ::-moz-range-thumb
• ::-moz-range-track

-webkit- 接頭辞

• ::-webkit-inner-spin-button
• ::-webkit-meter-bar
• ::-webkit-meter-even-less-good-value
• ::-webkit-meter-inner-element
• ::-webkit-meter-optimum-value
• ::-webkit-meter-suboptimum-value
• ::-webkit-progress-bar
• ::-webkit-progress-inner-element
• ::-webkit-progress-value
• ::-webkit-scrollbar
• ::-webkit-search-cancel-button
• ::-webkit-search-results-button
• ::-webkit-slider-runnable-track
• ::-webkit-slider-thumb

入れ子の擬似要素

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

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

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

ハイライト擬似要素の継承

ハイライト擬似要素、例えば ::selection、::target-text、::highlight()、::spelling-error、::grammar-error などは、通常の要素継承とは異なる一貫した継承モデルに従います。

擬似要素をハイライト表示するスタイルを適用すると、それらは両方から継承されます。

1. 親要素（通常の継承に従う）
2. 親要素のハイライト擬似要素（ハイライトの継承に従う）

これは、親要素のハイライト擬似要素と子要素のハイライト擬似要素の両方にスタイルを設定した場合、子要素のハイライト表示されたテキストが両方のソースのプロパティを組み合わせるということです。

具体的な例を挙げます。

まず、2 つのネストされた <div> 要素を含む HTML があります。含まれるテキストコンテンツの一部は親 <div> 内に直接含まれ、一部は子 <div> 内にネストされています。

<div class="parent">
  親のテキスト
  <div class="child">子のテキスト</div>
</div>

次にCSSを組み込みます。親と子の<div>要素を別個に選択し、それぞれに異なる color 値を適用します。さらに親と子の選択テキスト (::selection) も選択します。これにより、それぞれの <div> に異なる background-color が適用され、親要素の選択範囲には異なるテキスト color が設定されます。

/* 親要素のスタイル設定 */
.parent {
  color: blue;
}

/* 親要素の選択テキストのスタイル設定 */
.parent::selection {
  background-color: yellow;
  color: red;
}

/* 子要素のスタイル設定 */
.child {
  color: green;
}

/* 子が選択したテキストのスタイル設定 */
.child::selection {
  background-color: orange;
}

この例は次のように表示されます。

親要素と子要素の両方でテキストを選択してみてください。次の点に注意してください。

1. 親テキストを選択すると、.parent::selection で定義された黄色の背景と赤色のテキスト色が使用されます。
2. 子テキストを選択すると、次のものを使用します。
   • .child::selction のオレンジ色の背景。
   • 親要素の ::selection 擬似要素から継承された赤いテキスト色。

これは、子要素のハイライト擬似要素が、親要素とその親のハイライト擬似要素の両方から継承されることを示しています。

ハイライト擬似要素における CSS カスタムプロパティ（変数）は、ハイライトの継承チェーンを通じてではなく、元の要素（適用されている要素）から継承されます。例を示します。

:root {
  --selection-color: lightgreen;
}

::selection {
  color: var(--selection-color);
}

.blue {
  --selection-color: blue;
}

全称セレクターをハイライト擬似要素と併用すると、ハイライトの継承が防止されます。例を示します。

/* この操作によりハイライトの継承が防止される */
*::selection {
  color: lightgreen;
}

/* 継承をすることができるようにこれを優先する */
:root::selection {
  color: lightgreen;
}

仕様書

関連情報

• CSS 擬似要素モジュール
• 擬似クラス
• CSS セレクターモジュール
• 学習: 擬似クラスと擬似要素
• Inheritance changes for CSS selection styling - Chrome 134におけるハイライト擬似要素の継承モデル変更の詳細な説明