CSS疑似要素モジュール レベル4

1. はじめに

このセクションは参考情報です。

疑似要素は、文書言語によって明示的に作成される要素以外の、文書の抽象的な要素を表します。 これらは文書ツリーに収まる必要がないため、文書のツリー構造に必ずしも対応しない部分の選択やスタイリングに利用できます。 例えば、::first-line 疑似要素は、テキストの折り返し後の要素の最初の整形行の内容を選択でき、 段落の他の部分とは異なるスタイルをその行だけに適用できます。

各疑似要素は 発生要素 に関連付けられ、::name-of-pseudo という構文を持ちます。 このモジュールではCSSに存在する疑似要素や、そのスタイリング方法を定義します。 疑似要素全般や構文、他の セレクターとの関係については [SELECTORS-4] を参照してください。

注: 念のため、疑似要素は明示的に許可されている場合を除き連続してチェーンできません。 例えば ::marker::before は許可されませんが、 ::before::marker は許可されます。

2. 組版疑似要素

2.1. 最初の行テキスト: ::first-line 疑似要素

::first-line 疑似要素 は、 最初の整形行 に含まれる 発生要素 の内容を表します。

p::first-line { text-transform: uppercase }

注: 最初の行の長さは、 ページ幅やフォントサイズなど、さまざまな要因によって変化することに注意してください。

<P>This is a somewhat long HTML paragraph
that will be broken into several lines.
The first line will be styled
by the ‘::first-line’ pseudo-element.
The other lines will be treated
as ordinary lines in the paragraph.</P>

THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT
will be broken into several lines. The first
line will be styled by the ‘::first-line’
pseudo-element. The other lines will be 
treated as ordinary lines in the paragraph.

THIS IS A SOMEWHAT LONG
HTML paragraph that will
be broken into several
lines. The first line will
be styled by the
‘::first-line’ pseudo-
element. The other lines
will be treated as ordinary
lines in the paragraph.

2.1.1. 最初の整形行の判定

CSSにおいて、::first-line 疑似要素は ブロックコンテナに付与された場合のみ効果があります：

• 最初の整形行は、 インライン整形コンテキストを確立する ブロックコンテナの 最初の行ボックスのインラインレベル内容を表します。

• 最初の整形行は、 ブロックコンテナや マルチカラムコンテナが ブロックレベル内容を含む場合 （かつ テーブルラッパーボックスでない場合）、 最初のin-flow ブロックレベル子の 最初の整形行となります。 そのような行が存在しない場合は 最初の整形行はありません。

注: 最初の整形行は空行となる場合もあります。 例えば、p の最初の行が <p><br>First… の場合、最初の行には文字がありません。 したがって "First" という単語は最初の整形行にはなく、p::first-lineの影響を受けません。

注: ブロックコンテナ自身が ブロック整形コンテキストに参加しない場合、 その最初の行は祖先要素の最初の整形行にはなりません。 例えば、 <DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV> では、DIV の最初の整形行は "Hello" の行ではなく、そのインラインブロック全体を含む行となります。

ひとつの最初の整形行が 複数の::first-line 疑似要素で表現される場合、 疑似要素はその発生要素の順序に従い入れ子になります。 この行のインラインレベル内容（root inline boxフラグメントも含む）は、最も内側の::first-line 疑似要素内に入れ子となります。

<DIV>
  <P>First paragraph</P>
  <P>Second paragraph</P>
</DIV>

<DIV>
  <P><DIV::first-line><P::first-line>First paragraph</P::first-line></DIV::first-line></P>
  <P><P::first-line>Second paragraph</P::first-line></P>
</DIV>

2.1.2. ::first-line 疑似要素のスタイリング

::first-line 疑似要素の生成ボックスは インラインレベルボックスと似た挙動をしますが、いくつかの制約があります。 以下のCSSプロパティが::first-line 疑似要素に適用されます：

• すべてのフォント関連プロパティ（[CSS-FONTS-4]参照）
• color および opacity プロパティ（[CSS-COLOR-4]参照）
• すべての背景プロパティ（[CSS-BACKGROUNDS-3]参照）
• インライン要素に適用される組版プロパティ（[CSS-TEXT-4]参照）
• すべてのテキスト装飾プロパティ（[CSS-TEXT-DECOR-4]参照）
• ruby-position プロパティ（[CSS-RUBY-1]参照）
• インライン要素に適用されるインラインレイアウトプロパティ（[CSS-INLINE-3]参照）
• 各仕様で::first-line に適用されると定義されたその他のプロパティ

ユーザーエージェントは他にもプロパティを適用してよいですが、 以下の除外プロパティは適用できません：

• writing-mode
• direction
• text-orientation

注: line-height を ::first-line に設定すると、 その行をラップするroot inline boxフラグメントにも継承され、 最初の行ボックスの高さを増減させることができます。

2.1.3. 継承と ::first-line 疑似要素

CSSの継承処理時、 最初の行に現れる子のフラグメントは、前述の除外プロパティを除く標準的な継承プロパティを ::first-line 疑似要素から継承します。 それ以外のプロパティ（カスタムプロパティ [CSS-VARIABLES-1] を含む）は 非疑似の親から継承します。 （子要素内で最初の行に現れない部分は常に非疑似親から継承されます。）

<P><p::first-line>This is a somewhat long HTML paragraph
that</p::first-line> will be broken into several lines.
The first line will be styled
by the ‘::first-line’ pseudo-element.
The other lines will be treated
as ordinary lines in the paragraph.</p>

<p><p::first-line>This is a somewhat long</p::first-line> HTML paragraph
that will be broken into several lines.
The first line will be styled
by the ‘::first-line’ pseudo-element.
The other lines will be treated
as ordinary lines in the paragraph.</p>

<p><span>This is a somewhat long HTML paragraph
that will be broken into several lines.</span>
The first line will be styled
by the ‘::first-line’ pseudo-element.
The other lines will be treated
as ordinary lines in the paragraph.</p>

<p><p::first-line><span>This is a somewhat long HTML paragraph
that</span></p::first-line><span> will be broken into several lines.</span>
The first line will be styled
by the ‘::first-line’ pseudo-element.
The other lines will be treated
as ordinary lines in the paragraph.</p>

2.2. 最初の文字テキスト：::first-letter 疑似要素とその::prefixおよび::suffix 子要素

::first-letter 疑似要素は、 文字組字単位としての最初の文字・数字・記号 （Unicodeカテゴリ L*, N*, S*） およびその関連する句読点を、 最初の整形行の 発生要素内（最初の文字）として表します。 これらのテキスト全体を first-letter text（最初の文字テキスト）と呼びます。 ::first-letter 疑似要素は いわゆる「イニシャルキャップ」や「ドロップキャップ」など、 典型的な組版効果を作るために利用できます。

h2 + p::first-letter { initial-letter: 3; }

注: 最初の文字は実際には数字の場合もあります。 例：「67 million dollars is a lot of money.」の "6"。

最初の文字自身と隣接する句読点を個別にスタイリングできるよう、 関連する前置句読点は ::prefix サブ疑似要素（::first-letter::prefix）で、 関連する後置句読点は ::suffix サブ疑似要素（::first-letter 疑似要素の ::first-letter::suffix）で表されます。 詳細は § 2.2.1 最初の文字と関連句読点 を参照してください。

2.2.1. 最初の文字と関連句読点

CSS Text 3 § 1.4 Characters and Letters にて説明されている通り、 文字組字単位は 複数のUnicodeコードポイントを含む場合があります。 例えば、結合文字は基底文字と一体化して扱う必要があります。 また、言語によっては特定の文字の組み合わせをどのように扱うか追加の規則がある場合があります。 例えばオランダ語では、要素の先頭に "ij" の文字組み合わせが現れた場合、 両方の文字を ::first-letter 疑似要素内とみなすべきです。[UAX29] 最初の文字の選択にあたり、 UAは 文字組字単位の定義を ::first-letter 疑似要素の 包含ブロック の コンテンツ言語の first-letter伝統に合わせて調整するべきです。

前置・後置の句読点も first-letter text（最初の文字テキスト）の一部として ::first-letter 疑似要素に含める必要があります：

• すべての句読点（Unicode一般カテゴリ P*）や、間に挟まる文字組みスペース（Unicodeカテゴリ Zs、U+3000表意スペース以外）は、 最初の文字の前に現れた場合 first-letter text に含めます。[UAX44]
• 開き句読点やダッシュ以外のすべての句読点（Unicode一般カテゴリ P* のうち Ps開き句読点、Pdダッシュ以外）や、間に挟まる文字組みスペース（Unicodeカテゴリ Zs、U+3000表意スペースや単語区切り以外）は 最初の文字の後ろに現れた場合 first-letter text に含めます。

詳細は CSS Text 3 § 1.4 Characters and Letters および CSS Text 3 § E Characters and Properties を参照してください。文字組字単位とそのUnicodeプロパティについての情報は [CSS-TEXT-3]

2.2.2. 最初の文字テキストの検出

::first-line と同様に、 ::first-letter 疑似要素は ブロックコンテナに付与された場合のみ効果があります。 その first-letter text は、インラインレベル内容のうち、 インライン整形コンテキストに参加する 発生要素の 最初の整形行で 先頭に他のin-flow内容（画像やインラインテーブル等）がない場合の最初のものです。

この目的のため、マーカーボックスは、out-of-flowとして無視されます。 ただし、要素にin-flowの ::before または ::after 内容がある場合、 first-letter text は その生成された内容も含めた要素内容から選択されます。

一致するテキストが存在しない場合は、 first-letter text も ::first-letter 疑似要素もありません。

注: 最初の整形行が空の場合、::first-letter は何にも一致しません。 例えばこのHTML断片： <p><br>First... では、最初の行に文字が含まれないため ::first-letter は何にも一致しません。 特に "First" の "F" は一致せず、2行目に現れます。

注: ::first-line と同様、 first-letter text は ブロックコンテナ自身が ブロック整形コンテキストに参加しない場合、 祖先要素の first-letter text にはなりません。 例えば <DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV> では DIV の 最初の文字 は "H" ではありません。 実際、DIV には 最初の文字はありません。

first-letter text の一部が改行で次行に回された場合、 その部分は ::first-letter 疑似要素の一部ではなくなります。

2.2.3. 最初の文字疑似要素の継承とボックスツリー構造

::first-letter 疑似要素は、 表す first-letter text の周囲に直ちにラップされます（そのテキストが子孫であっても）。 first-letter text が複数の ::first-letter 疑似要素で表される場合、 疑似要素はその 発生要素の順序に従い入れ子になります。継承も同様です。

<div>
  <p><span>The first few words</span>
  and the rest of the paragraph.
</div>

<div>
  <p><span><div::first-letter><p::first-letter>T</…></…>he first few words</span>
  and the rest of the paragraph.
</div>

::first-letter::prefix や ::first-letter::suffix 疑似要素が存在する場合、 それらは最も内側の ::first-letter 内に入れ子となり、それ以外は ::first-letter 自体と同様に解釈されます。

<div>
  <p><span>“The first few words</span>
  and the rest of the quotation.
</div>

<div>
  <p><span><div::first-letter><p::first-letter><div::first-letter::prefix><p::first-letter::prefix>“</…></…>T</…></…>he first few words</span>
  and the rest of the paragraph.
</div>

first-letter text を構成する文字がすべて同じ要素にない場合 （‘T が <p>‘<em>T... のような場合）、 UAは ::first-letter 疑似要素 （および ::prefix や ::suffix サブ要素があればそれも）を、いずれかの要素またはすべての要素から生成するか、単に疑似要素を生成しないこともできます。 また、first-letter text が行頭にない場合 （双方向リオーダや、リスト項目の marker に list-style-position: inside がある場合等）、 UAは疑似要素を生成する必要はありません。

::first-letter 疑似要素は すべての ::first-line 疑似要素内に含まれ、 したがって（間接的にでも）::first-line から継承します。 これは同じ行上の インラインボックスと同様です。

2.2.4. 最初の文字疑似要素のスタイリング

CSSでは ::first-letter 疑似要素 （および ::prefix、::suffix サブ要素）は インラインボックスに類似しています。 以下のプロパティが ::first-letter、::first-letter::prefix、::first-letter::suffix 疑似要素に適用されます：

• すべてのフォント関連プロパティ（[CSS-FONTS-4]参照）
• color および opacity プロパティ（[CSS-COLOR-4]参照）
• すべての背景プロパティ（[CSS-BACKGROUNDS-4]参照）
• インライン要素に適用される組版プロパティ（[CSS-TEXT-4]参照）
• すべてのテキスト装飾プロパティ（[CSS-TEXT-DECOR-4]参照）
• インライン要素に適用されるインラインレイアウトプロパティ（[CSS-INLINE-3]参照）
• margin、padding関連プロパティ（[CSS22]参照）
• border関連プロパティおよび box-shadow（[CSS-BACKGROUNDS-4]参照）
• 各仕様で ::first-letter に適用されると定義されたその他のプロパティ

UAは他にもプロパティを適用してもよいですが、 どのような未記載プロパティでも ::first-letter に適用されることで その first-letter text の内容が変わってはなりません。::first-letter の表す内容が変化してはなりません。

注: CSSの以前のレベルでは、 UAは文字の形状に基づいて行高・幅・高さを選択したり、フォントサイズを概算したり、 レイアウト時にグリフアウトラインを考慮したりすることが許可されていました。 このような曖昧な魔法的仕様は利用例（ドロップキャップやレイズドキャップ）に対して適切な解決策ではなく、 相互運用性問題を引き起こしたため、意図的に排除されました。 ドロップキャップやレイズドキャップの明確な扱いについては initial-letter（[CSS-INLINE-3]）参照。

3. ハイライト疑似要素

3.1. ハイライトされたコンテンツの選択: ::selection, ::search-text, ::target-text, ::spelling-error, ::grammar-error, ::highlight() 疑似要素

ハイライト疑似要素は、ドキュメントのある部分に特定のステータスが与えられ、 一般的にそのステータスをユーザーに示すために異なるスタイルが適用される部分を表します。 例えば、選択されたドキュメント部分は通常ハイライトされ（背景色や前景色の変更、色のウォッシュなど）、 選択状態を示します。 次のハイライト疑似要素が定義されています：

::selection

::selection 疑似要素は、 ドキュメントの中で何らかの将来のユーザーエージェント操作の対象やオブジェクトとして選択された部分を表します。 例えば、編集可能なテキストフィールド内で選択されたテキストに適用され、 コピー操作でコピーされたり、ペースト操作で置き換えられる対象となります。

テスト

• active-selection-001-manual.html (manual test) (ソース)
• active-selection-002-manual.html (manual test) (ソース)
• active-selection-004-manual.html (manual test) (ソース)
• active-selection-011.html (ライブテスト) (ソース)
• active-selection-012.html (ライブテスト) (ソース)
• active-selection-014.html (ライブテスト) (ソース)
• active-selection-016.html (ライブテスト) (ソース)
• active-selection-018.html (ライブテスト) (ソース)
• active-selection-025.html (ライブテスト) (ソース)
• active-selection-027.html (ライブテスト) (ソース)
• active-selection-056.html (ライブテスト) (ソース)
• active-selection-057.html (ライブテスト) (ソース)
• active-selection-063.html (ライブテスト) (ソース)
• selection-background-color-001.html (ライブテスト) (ソース)
• selection-link-001.html (ライブテスト) (ソース)
• selection-link-002.html (ライブテスト) (ソース)
• selection-link-003.html (ライブテスト) (ソース)
• selection-over-highlight-001.html (ライブテスト) (ソース)
• selection-universal-shadow-dom.html (ライブテスト) (ソース)
• selection-contenteditable-011.html (ライブテスト) (ソース)
• selection-input-011.html (ライブテスト) (ソース)
• selection-textarea-011.html (ライブテスト) (ソース)
• textpath-selection-011.html (ライブテスト) (ソース)

::search-text

::search-text 疑似要素は、ユーザーエージェントのページ内検索機能で識別されたテキストを表します。 すべてのUAが一致したテキストをハイライト疑似要素で表現できる方法でスタイルするとは限らないため、 この疑似要素の実装は任意です。

:current 疑似クラス（ただし ::current() ではない）は、 ::search-text と組み合わせて現在フォーカスされている一致箇所を表すことができます。 :past や :future 疑似クラスは将来的な類似用途のために予約されています。 これらの疑似クラスと::search-textとの未対応な組み合わせは、必ず無効として扱われます。

::target-text

::target-text 疑似要素は、文書URLのフラグメントによって直接ターゲットされたテキストを表します。

注: URL フラグメントが要素をターゲットする場合、 :target 疑似要素でそれを選択できますが、 ::target-text は何にも一致しません。 この疑似要素は、[fragment]自体でターゲットされたテキストにのみ一致します。

テスト

• target-text-001.html (ライブテスト) (ソース)
• target-text-002.html (ライブテスト) (ソース)
• target-text-003.html (ライブテスト) (ソース)
• target-text-004.html (ライブテスト) (ソース)
• target-text-005.html (ライブテスト) (ソース)
• target-text-006.html (ライブテスト) (ソース)
• target-text-007.html (ライブテスト) (ソース)
• target-text-008.html (ライブテスト) (ソース)
• target-text-009.html (ライブテスト) (ソース)
• target-text-010.html (ライブテスト) (ソース)
• target-text-dynamic-001.html (ライブテスト) (ソース)
• target-text-dynamic-002.html (ライブテスト) (ソース)
• target-text-dynamic-003.html (ライブテスト) (ソース)
• target-text-dynamic-004.html (ライブテスト) (ソース)
• target-text-shadow-horizontal.html (ライブテスト) (ソース)
• target-text-shadow-vertical.html (ライブテスト) (ソース)
• target-text-text-decoration-001.html (ライブテスト) (ソース)

::spelling-error

::spelling-error 疑似要素は、 ユーザーエージェントによってスペルミスとしてフラグ付けされたテキスト部分を表します。

テスト

• spelling-error-001.html (ライブテスト) (ソース)
• spelling-error-002-manual.html (manual test) (ソース)
• spelling-error-003-manual.html (manual test) (ソース)
• spelling-error-004-crash.html (ライブテスト) (ソース)
• spelling-error-005-crash.html (ライブテスト) (ソース)
• spelling-error-006.html (ライブテスト) (ソース)

::grammar-error

::grammar-error 疑似要素は、 ユーザーエージェントによって文法的誤りとしてフラグ付けされたテキスト部分を表します。

テスト

• grammar-error-001.html (ライブテスト) (ソース)
• grammar-error-002-manual.html (manual test) (ソース)
• grammar-error-003-manual.html (manual test) (ソース)

::highlight(<custom-ident>)

::highlight() 関数型疑似要素は、 指定されたカスタムハイライトのカスタムハイライト名で識別されるドキュメントの部分を表します。 <custom-ident> 引数は必須です。 詳細は [CSS-HIGHLIGHT-API-1] を参照してください。

ハイライト疑似要素は必ずしも要素ツリーに収まる必要はなく、 入れ子構造を守らずに任意に要素境界をまたいで適用されることがあります。

3.2. ハイライトのスタイリング

ハイライト疑似要素は レイアウトに影響せず、動的な環境でも高いパフォーマンスで適用できる限られたプロパティのみで スタイリングできます。また（相互運用性確保のため）、 必要領域内の描画が ハイライトオーバーレイの （UAが決定する）正確な境界に依存しないことが条件です。

以下のプロパティがハイライト疑似要素に適用されます：

• color
  テスト

  • active-selection-001-manual.html (manual test) (ソース)
  • active-selection-011.html (ライブテスト) (ソース)
  • active-selection-016.html (ライブテスト) (ソース)
  • active-selection-018.html (ライブテスト) (ソース)
• background-color
  テスト

  • active-selection-002-manual.html (manual test) (ソース)
  • active-selection-012.html (ライブテスト) (ソース)
  • active-selection-031.html (ライブテスト) (ソース)
• text-decoration および関連プロパティ（text-underline-position や text-underline-offset を含む）
  テスト

  • active-selection-004-manual.html (manual test) (ソース)
  • active-selection-014.html (ライブテスト) (ソース)
  • active-selection-021.html (ライブテスト) (ソース)
  • grammar-error-001.html (ライブテスト) (ソース)
  • grammar-error-002-manual.html (manual test) (ソース)
  • grammar-error-003-manual.html (manual test) (ソース)
  • spelling-error-001.html (ライブテスト) (ソース)
  • spelling-error-002-manual.html (manual test) (ソース)
  • spelling-error-003-manual.html (manual test) (ソース)
• text-shadow
  テスト

  • marker-text-shadow.html (ライブテスト) (ソース)
• stroke-color、fill-color、および stroke-width
  テスト

  • textpath-selection-011.html (ライブテスト) (ソース)
• カスタムプロパティ [CSS-VARIABLES-1]

他にもここに含めるべきプロパティはありますか？

注: 歴史的に（執筆時点でも）、color および background-color のみが相互運用的にサポートされています。

注: color プロパティは、 テキスト自体、すべてのライン装飾（下線、上線、打ち消し線）、 強調マーク（text-emphasis）に対して、 発生要素およびその祖先・子孫によって適用されたものすべての色を設定します。

上記に記載されていないプロパティで、適用プロパティの値を解決する必要があるものについては、 それらの算出値は発生要素の値からコピーされ、 ハイライト疑似要素自身に指定された値は無視されます。 例：

• forced-color-adjust（強制カラー表示モードで色を解決するために使用） および color-scheme（<system-color> の値を解決するために使用）
• font-size、font-family 等（emや その他フォント相対長の単位を解決するために使用）。
• line-height（lh単位を解決するために使用）
• カスタムプロパティ [CSS-VARIABLES-1]（var() 置換で使用）

特定のハイライト疑似要素について 著者起源で色が指定されている場合、 その色は指定どおりに尊重されなければなりません。 つまりUAは追加処理（半透明ウォッシュを使うなど）をしてはなりません。 ただし著者起源に色指定がない場合は、 UAが追加の色処理を行うことがあります。

注: この仕様は、指定された著者スタイルシートを解釈するすべてのユーザーエージェント間で 色のコントラストが保たれることを保証するためのものです。

ベンダープレフィックス付きプロパティ（例：-webkit-text-fill-color）は ハイライト疑似要素には適用できません。

3.3. UAのデフォルトスタイル

UAスタイルシートのデフォルトへの追加として、以下を推奨します：

/* デフォルトのスペル/文法エラーのスタイルを調整可能な方法で表現 */
:root::spelling-error { text-decoration: spelling-error; }
:root::grammar-error  { text-decoration: grammar-error; }

一部のハイライト疑似要素には ペアのデフォルトハイライト色 （UAが提供するデフォルトのcolorとbackground-color、同時に使用または上書きされる）が必要です。 詳細は § 3.3.1 ペアのデフォルト を参照。 ::selection では HighlightText と Highlight、 ::target-text では MarkText と Mark に対応すべきです。

UAは、ハイライトされた内容の表示を強調するために追加効果を適用することがあります。 例えば、ハイライトされていない内容を暗く表示したり、 ユーザー操作や時間経過に応じてハイライトスタイルを遷移させたりします。 これらはCSSでは制御できません。

CSSで制御可能な方法で UAによるハイライト表示の調整については Issue 6853で議論中です。

3.3.1. ペアのデフォルト

互換性維持のため、ペアのデフォルトハイライト色は used値としてのみ使用されるべきであり、 color も background-color も cascaded value が 著者起源（またはその値が著者起源から継承）でなければならない。 ハイライト色が revert または revert-layer の場合、 カスケードをロールバックした後の起源が cascaded value のoriginを決定します。

注: この規則は互換性維持のためであり、 fill-color や stroke-color 等の類似プロパティには適用されません。

<p>Highlight this <em>and this</em>.</p>

em::selection { color: initial; }
em::selection { color: inherit; }
em::selection { color: unset; }
em::selection { color: green; }
p::selection { color: green; }

3.4. ハイライト領域

各ハイライト種別（§ 3.1 ハイライトされたコンテンツの選択: ::selection、::search-text、::target-text、::spelling-error、::grammar-error、::highlight() 疑似要素参照） について、ドキュメント全体に対して単一のハイライトオーバーレイが存在し、 そのアクティブ部分が該当するハイライト疑似要素で表現されます。 各ボックスは、そのボックスが直接含むテキストまたは置換内容に対応するオーバーレイの部分を所有します。

• テキストの場合、対応するオーバーレイは少なくともemボックス全体を覆う必要があり、 さらに上下方向でemボックスよりも広くラインボックス端まで広がることもあります。 2文字間の空白もオーバーレイ領域の一部となる場合があり、 その場合は両文字を含む最も内側の要素に属し、両文字が選択されているときに選択されます。
  テスト

  • selection-intercharacter-011.html (ライブテスト) (ソース)
  • selection-intercharacter-012.html (ライブテスト) (ソース)
• 置換内容の場合、対応するオーバーレイは少なくとも置換オブジェクト全体を覆う必要があり、 要素のコンテンツボックス全体まで広がることがあります。
  テスト

  • active-selection-043.html (ライブテスト) (ソース)
• オーバーレイは要素のborder-box内の他の領域も含むことがあり、その場合その領域は その領域を含む最も内側の要素に属します。
• インラインレベルボックスについては、 オーバーレイがborder端からブロック軸方向にラインボックス端まで広がることがあります。

F2F議事録、 dbaronの投稿、 Danielのスレッド、 Geckoのノート、 Operaのノート、 Webkitのノートも参照

この説明が実際の挙動を正しく表現しているかは不明です。

3.5. カスケードと要素ごとのハイライトスタイル

各要素は、その要素自身のアクティブなハイライトオーバーレイ部分を描画し、 その部分には該当するハイライト疑似要素のスタイルが適用されます。 その要素が発生要素である場合です。 複数のスタイルが競合した場合は、カスケードによって勝者が決定されます。

サポートされるプロパティがカスケードで値を持たない場合や、inherit または unset が指定された場合、 その指定値は 親要素の該当ハイライト疑似要素から継承されて決定されます。 この挙動は、そのプロパティが継承プロパティかどうかに関わらず発生します。

さらに、ハイライト疑似要素が ルート要素に由来する場合、 color の継承値は currentColor となり、 初期値ではありません。

すべてのカスタムプロパティは、 そのプロパティがinheritで登録されているかどうかに関係なく、 発生要素から継承されます。

p::selection      { color: yellow; background: green; }
p > em::selection { color: orange; }
em::selection     { color:    red; }

<p>Highlight this <em>and this</em>.</p>

複数の選択スタイルを設定したい場合は、ドキュメント全体の選択スタイルとして :root::selection を使用してください。 これにより子孫での上書きが容易になります。 ::selection だけだと ツリー内のすべての要素に適用され、祖先のより具体的なスタイルを上書きしてしまいます。

::selection          { background: blue; }
p.warning::selection { background:  red; }

<p class="warning">Some <strong>very important information</strong></p>

:root::selection     { background: blue; }
p.warning::selection { background:  red; }

以下の例は カスタムプロパティ の継承を示します。

:root {
   --background-color: green;
   --decoration-thickness: 10px;
   --decoration-color: purple;
 }
 ::selection {
   --decoration-thickness: 1px;
   --decoration-color: green;
 }
 div::selection {
   --decoration-color: blue;
   background-color: var(--background-color, red);
   text-decoration-line: underline;
   text-decoration-style: line;
   text-decoration-thickness: var(--decoration-thickness, 5px);
   text-decoration-color: var(--decoration-color, red);
 }

注: この挙動により、 既存実装と互換性のある形で カスタムプロパティによる選択スタイル制御が可能となります。

3.6. ハイライトの描画

3.6.1. 背景

各ハイライト疑似要素は、 対応するハイライトオーバーレイ部分の上に背景を描画します。 背景は、配置された子孫のすぐ下（つまり CSS2.2§E.2 のステップ8の直前）に描画されます。 ::selection オーバーレイは ::target-text オーバーレイの上に描画され、 それは ::spelling-error オーバーレイの上に、 それは ::grammar-error オーバーレイの上に、 それは ::highlight オーバーレイの上に描画されます。 ::search-text オーバーレイは UA によって :selection オーバーレイの直上または直下に描画され、 他のすべてのオーバーレイの上に描画されます。

3.6.2. シャドウ

text-shadow が ハイライト疑似要素に適用される場合、 それは対応するハイライトオーバーレイの背景の上に描画されます。 そのようなテキストシャドウは互いに重なり合い、 （元の text-shadow が テキストやその装飾に適用されている場合も引き続き適用されます）。

注: 各ハイライトオーバーレイの背景は 下層レイヤーのシャドウの上に描画されるため、 ハイライトオーバーレイの背景が下層のシャドウを隠してしまうことがあります。

3.6.3. テキストとテキスト装飾

ハイライト疑似要素は、 通常描画される関連テキストおよび テキスト装飾（シャドウ以外）を抑制します。 かわりに最上位のアクティブなハイライトオーバーレイが、 そのハイライト自身のcolorを用いて、 そのテキスト（および装飾）をすべての ハイライトオーバーレイ背景の上に再描画します。

注: これはシャドウとは異なり、 ライン装飾や強調マークは 関連するテキストのために描画されるハイライトオーバーレイの背景によって 隠れないことを意味します。

この目的のため、currentColor が ハイライト疑似要素の colorプロパティに指定された場合、 それは直下のアクティブな ハイライト疑似要素レイヤーの colorを表し、 最終的にはそれ以外の色（発生要素や 疑似要素（::first-line や ::first-letter など）が 適用したもの）にフォールバックします。

注: 要素自身のテキスト装飾（ライン装飾と 強調マークの両方）は、 color が currentColor でない場合、 疑似要素自身の色で描画され、元の色や塗り指定は無視されます。

各ハイライト疑似要素が導入するテキスト装飾は、 背景と同じ順序で重ねられ、 テキスト本来の装飾の上に重なり、それぞれの色で描画されます。 通常の描画順序が適用されるため、 CSS2付録Eの通り、 下線は上線の下、 上線はテキストの下、 テキストは打ち消し線の下に描画されます。 ただし、::selection によるテキスト装飾は、 テキストとともに最上位レイヤーとして 他の装飾の上にまとめて描画される場合があります。

ライン装飾は ハイライト疑似要素によって導入され、 その発生要素に関連するテキストのみに適用されます。 子孫にはプロパティ継承（上記参照）以外では伝播しません。

注: 発生要素自身の装飾とは異なり、 ハイライト疑似要素で宣言された装飾は フロー外要素や インラインブロックにも伝播し、 太さや位置は子孫ごとに異なる場合があります。

3.6.4. 置換要素

非置換内容の場合、UAはcolor および background-color（アルファチャンネル含む）を 指定通りに尊重しなければなりません。 しかし置換内容の場合、UAは半透明のウォッシュを生成し、 選択部分の下にコンテンツが透けて見えるようにするべきです。 このウォッシュは、指定された background-color が transparent でなければその色で、 transparent なら指定された color で塗られますが、 UAはアルファチャンネルを調整しても構いません。

3.7. ハイライトのセキュリティ考慮事項

スペルおよび文法エラーのスタイリングは ユーザーの辞書内容（ユーザー名やアドレス帳の内容なども含まれる場合がある！）に関する情報漏洩につながり得るため、 ::spelling-error および ::grammar-error を実装するUAは、 これらのハイライトされた区間のスタイルを ページから読み取れないようにしなければなりません。

4. ツリー従属疑似要素

ツリー従属疑似要素は常にボックスツリー内に収まります。 それらは継承可能なプロパティを 発生要素から継承し、 非継承プロパティは通常通り初期値となります。[CSS-CASCADE-4] このうち一部は 完全スタイル可能疑似要素であり、 実際の要素に適用できるすべてのプロパティが 完全スタイル可能疑似要素にも適用されます。

4.1. 生成コンテンツ疑似要素: ::before および ::after

算出されたcontent 値が none でない場合、 これらの疑似要素は 発生要素の直下の子として 指定された content の内容を持つ ボックスを生成します。

::before

スタイル可能な子疑似要素であり、 発生要素の実際の内容の直前に位置します。

::after

スタイル可能な子疑似要素であり、 発生要素の実際の内容の直後に位置します。

::before と ::after は 完全スタイル可能疑似要素であり、 適用できるプロパティに制限はありません。

p.note::before { content: "Note: " }

通常の要素内容と同様、 ::before や :after 疑似要素の生成内容は、 ::first-line および ::first-letter 疑似要素にも含まれることがあります（親の発生要素に適用される場合）。 また、通常の子要素同様、 ::before および ::after 疑似要素は、親すなわち 発生要素が 置換要素の場合は抑制されます。

4.2. リストマーカー: ::marker 疑似要素

::marker 疑似要素は、 マーカーボックス（自動生成）の リスト項目を表します。 （詳細は [CSS-DISPLAY-3] および [CSS-LISTS-3] を参照）

::marker の内容は ::first-letter では無視され（選択されません）。

::marker と ::first-line の相互作用については 現在 Issue 4506 で議論中です。

::marker は ツリー従属疑似要素ですが、 完全スタイル可能ではありません。 ::marker 疑似要素で使用できるプロパティは限られています。 このリストは CSS Lists 3 § 3.1.1 ::marker に適用されるプロパティ で定義されています。

::before::marker や ::after::marker セレクタは 有効であり、 マーカーボックスを表すために ::before や ::after 疑似要素がリスト項目である場合に利用できます。 ただし ::marker::marker は無効であり、 display の 算出値は ::marker 上では list-item の特性を常に失います。

::marker に ::prefix や ::suffix のサブ要素も必要かどうか？

4.3. プレースホルダー入力: ::placeholder 疑似要素

::placeholder 疑似要素は、 入力フィールド内のプレースホルダー文字列（入力内容を表し、フォームの記入方法をユーザーに示唆するヒントとなる文字列）を表します。 例えば日付入力フィールドの場合、 「YYYY/MM/DD」というプレースホルダー文字列により、数値の日付を年月日順で入力することが明示されます。 これは ツリー従属疑似要素です。

注: :placeholder-shown 疑似クラスも存在し、 プレースホルダー文字列が表示されている（実際の）要素に適用され、 そのような要素を特別にスタイリングするために使えます。 ::placeholder は プレースホルダー文字列そのものを表すため、できることは比較的限られています。

::first-line 疑似要素に適用できるすべてのプロパティは、 ::placeholder 疑似要素にも適用可能ですが、 [CSS-INLINE-3] で定義されたものは除きます。

インタラクティブメディアでは、ユーザーが入力するとプレースホルダー文字列が隠されることが多いですが、 これは必須ではなく、入力内容とプレースホルダー文字列が同時に表示される場合もあります。 挙動の詳細はUA依存です。 静的メディア（印刷など）では、ユーザーが入力した後でもプレースホルダー文字列は残ります。

著者は text-align をサポートプロパティ一覧に入れることを望んでいるようです。 例：こちらのコメント参照。

注: ::placeholder が 要素ツリー内に該当要素があるプレースホルダーを指すようにすべきという要望もあります。 その仕様方法は未定ですが、検討の価値はありそうです。 Issue 2417 参照。

5. 要素裏付け疑似要素

要素裏付け疑似要素は、 ほとんどのCSSや他のプラットフォーム機能と、 実際の要素として（実際に選択不可な実要素である場合も多い）連携します。

要素裏付け疑似要素は常に ツリー従属です。 特に指定がなければ 完全スタイル可能であり、 発生要素から継承します（標準的なツリー従属疑似要素と同様）。 ただし、他の要素から継承するよう定義される場合もあります。 （例：::part() は シャドウツリー内の要素の親から継承します。）

すべての 疑似クラスおよび 疑似要素は、 要素裏付け疑似要素（例：x-button::part(label):hover や x-button::part(label)::before）の後にも構文上許可されます。 これは、疑似要素が 型セレクタであるかのように扱われるためですが、 次のものは一致しません：

• 構造疑似クラス、:has() 疑似クラス、:scope 疑似クラス、 および :host/:host()/:host-context() 疑似クラス は決して一致しません。

• ::part() は決して一致しません（他の 要素裏付け疑似要素は一致する場合があります）。

要素裏付け疑似要素は 実際の要素（現在のツリーでアクセスできないものも含む）を表すと定義することができます。 その場合、上記で特に禁止されていないすべての疑似クラスと疑似要素は その実要素上と同様に一致します。 そうでない場合は、一致する疑似クラスを定義する必要がありますが、 特に指定がなければ、 ツリー従属疑似要素で許可されている疑似クラスは 要素裏付け疑似要素でも常に許可されます。

5.1. ファイルセレクタボタン: ::file-selector-button 疑似要素

::file-selector-button 疑似要素は、 UAがそのようなボタンを描画する場合、 <input> 要素（ type=file ）内の <button> を対象とします。

::file-selector-button 疑似要素に適用できるプロパティには制限がありません。

::file-selector-button { border: 3px solid green }

5.2. details要素の展開コンテンツ: ::details-content 疑似要素

::details-content 疑似要素は、 details 要素内で展開・折りたたみ可能な追加情報を対象とします。 これは 要素裏付け疑似要素です。

::details-content 疑似要素に適用できるプロパティには制限がありません。

details::details-content {
  opacity: 0;
  transition: content-visibility 300ms allow-discrete, opacity 300ms;
}

details[open]::details-content {
  opacity: 1;
}

6. 疑似要素の重なり合いと相互作用

<style>
p { color: red; font-size: 12pt }
p::first-letter { color: green; font-size: 200% }
p::first-line { color: blue }
</style>

<p>Some text that ends up on two lines</p>

<p>
  <p::first-line>
    <p::first-letter>
      S
    </p::first-letter>
    ome text that
  </p::first-line>
  ends up on two lines
</p>

7. CSSオブジェクトモデルへの追加

7.1. CSSPseudoElement インターフェース

CSSPseudoElement インターフェースは 疑似要素をイベントターゲットにすることを可能にします。

[Exposed=Window]
interface CSSPseudoElement : EventTarget {
    readonly attribute CSSOMString type;
    readonly attribute Element element;
    readonly attribute (Element or CSSPseudoElement) parent;
    CSSPseudoElement? pseudo(CSSOMString type);
};

このインターフェースは設計開発中です。 このドラフトは実装よりもフィードバックを求めています。 CSSWGはユースケースや課題について特に意見を歓迎します。

type 属性は 疑似要素の型を表す文字列です。 以下の値のいずれかになります：

"::before"

::before 疑似要素を表します。

"::after"

::after 疑似要素を表します。

"::marker"

::marker 疑似要素を表します。

element 属性は 最終発生要素を返します。

parent 属性は 疑似要素の発生要素を返します。 多くの疑似要素では parent と element は同じ Element を返しますが、 サブ疑似要素の場合は parent は CSSPseudoElement を、 element は Element を返します。

pseudo(type) メソッドは 引数で指定されたサブ疑似要素を表す CSSPseudoElement インターフェースを返します（そのような サブ疑似要素が存在し有効な場合）。 そうでなければ null を返します。 下記 pseudo() 参照。

注: このインターフェースは将来的に他の疑似要素型や CSSStyleDeclaration の style 属性によるスタイル情報の設定などに拡張される可能性があります。 現在の機能は [web-animations-1] をサポートするために限定されています。

7.2. pseudo() メソッド（Element インターフェース）

Element インターフェースに新しいメソッドが追加され、 指定要素によって生成された指定型の疑似要素を取得できます：

partial interface Element {
  CSSPseudoElement? pseudo(CSSOMString type);
};

同じ疑似要素および同じ発生要素を表す返り値は、 観測可能な限り常に同じ CSSPseudoElement オブジェクトでなければなりません。 （UAは利便性やパフォーマンスのため、観測できない範囲でオブジェクトを破棄・再生成しても構いません）

pseudo() メソッドの返値の同一性・寿命・null性（およびエラーケース）については議論中です。 Issue 3607、Issue 3603 参照。

7.3. getComputedStyle()

第2引数 pseudoElt が ハイライト疑似要素を参照する場合、 getComputedStyle() は、該当ハイライトがアクティブで他のハイライトが非アクティブであるかのようにスタイルを返します。 これにより、実際のハイライト状態に依存した結果による曖昧さやプライバシーリスクを避けられます。

8. 互換性構文

既存のCSS Level 2 [CSS2] 用スタイルシートとの互換性のため、 ユーザーエージェントは ::before、::after、::first-letter、::first-line 疑似要素に対して 旧式のコロン1個表記（:before, :after, :first-letter, :first-line）も受け付けなければなりません。

セキュリティ考慮事項

ハイライトについては § 3.7 ハイライトのセキュリティ考慮事項 を参照してください。

プライバシー考慮事項

このモジュールに対する新たなプライバシー考慮事項はありません。

変更点

2022年12月30日 作業草案以降の主な変更点：

• 要素裏付け疑似要素と完全スタイル可能疑似要素の定義。 (Issue 10199, Issue 10083)
• ハイライト疑似要素（Issues 7591, 7580, 6641, 11317）の プロパティ（およびカスタムプロパティ）適用と継承モデルの再設計
• ::highlight() 定義と [CSS-HIGHLIGHT-API-1] への参照強化。 (Issue 6755)
• ::search-text を新規ハイライト 疑似要素として追加し、 :current との組み合わせを許可。 (Issues 10212 10213, and 10298)
• ::details-content 疑似要素追加 (Issue 10379)
• ::first-letter の前に現れる場合、 空白およびノーブレークスペースも含めるよう変更。 (Issue 9413)
• ::postfix を ::suffix に改名。 (Issue Issue 11949)
• ::placeholder から インラインレイアウトプロパティを除外。 (Issue 5379)
• ハイライト 疑似要素について、UAは著者指定の色を変更してはならないことを明確化。 (Issue 6853)
• color の継承値が currentColor であり、 初期値ではないことを明確化。

2020年12月31日作業草案（2020年12月31日作業草案）以降の主な変更点：

• ::first-letter::prefix および ::first-letter::postfix サブ疑似要素を追加し、::first-letter 疑似要素に関連する句読点を扱えるようにした。 （Issue 2040）
• first-letter text のパターンを微調整：
  • first-letter text から単語区切りのスペースを除外。 （Issue 5830）
  • ダッシュおよび開く句読点を、後続の句読点から除外。 （Issue 5830）
  • 記号によるfirst letter の表現を許可。 （Issue 5099）
  • first-letter text が改行で途切れることを明確化。 （Issue 2254）
• :first-letter の定義を改訂・明確化し、例と注記を改善。
• ::first-line の定義を改訂・明確化し、例を改善。
• line-height の ::first-line への適用を定義。 （Issue 2282）
• ::first-line と ::first-letter のボックス構造上の相互作用を定義。
• ::first-line と root inline box の階層順序を定義。 （Issue 1384）
• ペアのデフォルトとしてhighlight pseudo-element の color と background-color の挙動を明確化。 （Issue 6386、Issue 6774、Issue 6779、Issue 7837）
• 強制カラー表示モードのhighlight pseudo-elementsへの適用を定義。 （Issue 7264）
• highlight pseudo-element のテキスト装飾の描画順・伝播・適用方法を明確化。 （Issue 6022、Issue 6829、Issue 7101）
• caret-color と cursor を highlight pseudo-elements への適用から除外。 （Issue 4100）
• highlight pseudo-elements と getComputedStyle() の相互作用を明確化。 （Issue 6818）
• カスタムプロパティ の 疑似要素への適用を明確化。 （Issue 6264）
• CSSPseudoElement インターフェースに parent 属性と pseudo() メソッドを追加し、サブ疑似要素に対応。 （Issue 3836）

2019年2月25日作業草案（2019年2月25日作業草案）以降の主な変更点：

• ::target-text 疑似要素を追加。 （Issue 5522）
• ::inactive-selection を削除。 （Issue 4579）
• ::file-selectors-button 疑似要素を追加。 （Issue 5049）
• ::first-line からのプロパティ継承ルールを調整し、継承可能/不可プロパティを区別、特にカスケードに影響する 書字モード制御プロパティの適用を除外、カスタムプロパティとの相互作用も定義。 （Issue 1097）
• ruby-position を ::first-line で許可されるプロパティに追加し、 text-emphasis-position と同様の扱いへ。 （Issue 2998）
• ::first-letter の最初の文字と周囲の句読点の間のスペースを含めるようにした。 （Issue 5154）
• ::marker と ::first-letter の相互作用を定義。
• ::before::marker および ::after::marker を有効化。 （Issue 1793）
• ::marker に適用されるプロパティ一覧を [CSS-LISTS-3] に移動し content、unicode-bidi、direction を追加。
• ::marker を CSSPseudoElement インターフェースで許可される型に追加。 （Issue 3763）
• pseudo() の戻り値を明確化。 （3603、3607）
• インラインレベルボックスのハイライトオーバーレイがラインボックス端まで広がることを許可。 （5395、4624）
• currentColor が highlight pseudo-element に指定された場合、テキストが「ハイライト」されていない場合に使われる色を使用することを明確化。 （Issue 4625）
• text-shadow と highlight pseudo-elements の相互作用を定義。 （Issue 3932）
• UAデフォルトスタイルシートのハイライト疑似要素への適用規則を改善。

2016年6月7日作業草案（2016年6月7日作業草案）以降の主な変更点：

• spelling-error および grammar-error を ::spelling-error および ::grammar-error とともにUAスタイルシートで指定。
• 親子ハイライト疑似要素間の値伝播をカスケードではなく継承で行うよう再定義。詳細は Issue 2474 参照。
• ハイライト疑似要素でサポートされるプロパティ一覧を調整（例：stroke-color/fill-color 追加、outline 削除など）。
• ハイライト疑似要素のテキストとテキスト装飾の色の描画方法を明確化。
• element 属性を CSSPseudoElement インターフェースに追加。
• type 属性の値を CSSPseudoElement インターフェースで該当疑似要素に合わせて変更。
• CSSPseudoElement の対応型を削減し、未実装の style 属性を削除。
• window.getPseudoElements(elem,type) を Element.pseudo(type) に変更。
• その他細かな明確化や修正。

謝辞

編集者は本仕様への貢献者として、以下の個人に特に感謝します： Tab Atkins、 Delan Azabani、 David Baron、 Oriol Brufau、 Razvan Caliman、 Stephen Chenney、 Chris Coyier、 Anders Grimsrud、 Vincent Hardy、 François Remy。