CSSオーバーフローモジュール レベル5

1. はじめに

この仕様は [CSS-OVERFLOW-4] を拡張します。 現時点では差分仕様であり、 新しい機能のみをいくつか定義しています。 オーバーフローに関連するその他の機能については [CSS-OVERFLOW-4] を参照してください。

スクロールナビゲーション制御

このセクションでは、スクローラー内の要素に スクロールマーカー を関連付ける機能 （または ::scroll-marker 疑似要素として自動生成し、 ユーザーの自動動作やアクセシブルラベルを付与）の定義を行います。 これらは、関連する要素へスクロールしたり、 :target-current 疑似クラスを通じて スクロール位置の進行状況を反映したりできます。

また、::scroll-button() 疑似要素も定義されており、 これをアクティブ化することで、対応するスクローラーが指定した方向に「ページ」単位でスクロールします。

オーバーフローの転送

このセクションでは、オーバーフローを新たに生成された 断片化コンテナ に転送して処理する 非常に実験的かつ探索的な新モデルを定義します。

2. オーバーフローの概念と用語

Level 3の内容は最終化時にコピーすること。

2.1. スクロールオーバーフロー

スクロールオーバーフローの概念に、以下が追加されます：

すべての スクロールコンテナ は 現在のスクロールターゲット を保持します。 初期値は null であり、 ユーザーによるその スクロールコンテナ でのスクロール操作、 またはターゲットのないスクリプトによる操作、 あるいはターゲットが文書から削除された場合には null にリセットされます。 スクロールコンテナ でターゲットElementやPseudoElementを指定してスクロール操作を行った場合、 現在のスクロールターゲット がそのElementまたはPseudoElementに設定されます。

現在のスクロールターゲットの設定は ターゲットを表示範囲にスクロール する方法で定義されるべきです。

現在のスクロールターゲットを スクロールアンカー優先候補 として利用すること。

3. スクロールナビゲーション制御

3.1. スクロールマーカー

スクロールマーカー とは、 スクロールターゲット を持つ要素または疑似要素です。 要素または疑似要素の スクロールターゲット は、 Element であり、スクロールマーカー により示されます。 どの要素が スクロールマーカー となるか、 その スクロールターゲット が何かは、ホスト言語定義です。 HTML <a> 要素 や SVG <a> 要素 は スクロールマーカー であり、 その スクロールターゲット は 示された文書部分 です。 これらのナビゲーションリンクは現在でも作成可能ですが、 ユーザーに対して現在表示中のコンテンツに関するフィードバックがほとんどなく、 インタラクションモデルは多くの最新アクセシブルUIコンポーネントの期待と一致しません。

この仕様では、スクロールマーカー のグループ化機構と、 ::scroll-marker 疑似要素の自動生成機構を追加します。 各グループ内で、アクティブなマーカーが現在のスクロール位置を反映し、 ユーザーにどのセクションにいるかを示すスタイルを適用できます。

ユースケースには、目次リンク、カルーセルページのマーカー、スクロール可能なタブパネルなどが含まれます。

これらの例を表現する画像を追加すること。

3.1.1. スクロールマーカーのグループ化

focusgroup 属性を持つ要素は、 スクロールマーカーグループコンテナ を定義し、 その スクロールマーカーグループ に 最も近い祖先 スクロールマーカーグループコンテナ を持つ スクロールマーカー 要素すべてが含まれます。

スクロール進行状況追跡のためのマーカーグループ化は、focusgroupのフォーカス挙動へのオプトインと分離すべきです。

::scroll-marker-group 疑似要素は、 その中の ::scroll-marker 疑似要素の スクロールマーカーグループ を形成する スクロールマーカーグループコンテナ です。

3.1.2. scroll-marker-group プロパティ

scroll-marker-group プロパティは、 スクロールコンテナ に '::scroll-marker-group' 疑似要素を生成するか、 その位置をスクロールコンテナに対してどこにするかを指定します。

none

スクロールコンテナ は '::scroll-marker-group' 疑似要素を生成しません。

before

スクロールコンテナ は ::scroll-marker-group 疑似要素を生成し、 そのボックスは 生成元要素 の直前の兄弟要素となります。

after

スクロールコンテナ は ::scroll-marker-group 疑似要素を生成し、 そのボックスは 生成元要素 の直後の兄弟要素となります。

3.1.3. ::scroll-marker-group 疑似要素

::scroll-marker-group 完全にスタイル可能な疑似要素 は、 スクロールコンテナ 要素によって生成されます。 この要素の scroll-marker-group プロパティの算出値が none でない場合に生成されます。

::scroll-marker-group は、 生成元要素 の 兄弟要素としてボックスを生成し、 （scroll-marker-group: before の場合は直前に、 scroll-marker-group: after の場合は直後に）配置されます。

スクロールマーカー疑似要素の生成がサイトのレイアウトを壊さないよう、デフォルトUAスタイルシートには次の追加が推奨されます：

/* ::scroll-marker 疑似要素の生成は
 * この疑似要素の外のレイアウトを壊すべきではありません。 */
::scroll-marker-group { contain: size !important; }

scroll-marker-group は暗黙的に単一のフォーカス可能なコンポーネントとして振る舞い、 focusgroup を確立します。

3.1.4. ::scroll-marker 疑似要素

::before や ::after と同様に、 すべての要素は ::scroll-marker 疑似要素を持つことができ、 これは最も近い祖先 ::scroll-marker-group のグループに集められ、 アクティブ化するとその要素へスクロールします。

最も近い祖先 スクロールコンテナ スクロールコンテナ の scroll-marker-group プロパティが none でなく、 ::scroll-marker 疑似要素の content の算出値が none でない場合、 疑似要素は、最も近い祖先 スクロールコンテナ の ::scroll-marker-group 疑似要素の生成ボックスの子としてボックスを生成します。 これらのボックスは、ツリー順で 生成元要素 に追加されます。

これらの疑似要素の スクロールターゲット は 生成元要素 です。 これらは tabindex が "-1" の要素として振る舞い、 グループ内で矢印キーによるナビゲーションや、 現在アクティブな場合、または他にアクティブな ::scroll-marker がなくグループの最初のマーカーである場合にタブキーでフォーカス可能となり、 グループに 保証されたタブストップ を提供します。

3.1.5. アクティブなスクロールマーカーの選択：:target-current 疑似クラス

各スクロールマーカーグループ内では、常に1つだけ「アクティブ」なスクロールマーカーが決定されます。 この「アクティブ」なスクロールマーカーは:target-current疑似クラスに一致します。

a:target-current {
  font-weight: bold;
}

スクロール操作は、特定の位置へアニメーションする場合（例：スクロールバーの矢印クリック、矢印キー、"behavior: smooth"なプログラムスクロール）や、 ユーザーの入力を直接追従する場合（例：タッチスクロール、スクロールバーのドラッグ）があります。 いずれの場合も、ユーザーエージェントはスクローラーが到達する「最終スクロール位置」を選択します。これにより、関連するマーカーが即座にアクティブになります。

この「最終スクロール位置」が各スクロールマーカーグループ内のアクティブマーカーを判定するために使われます。 マーカー自体はコンテンツの開始（例：見出し）を示すだけの場合もあるため、アクティブなマーカーは、現在地またはそれ以降のスクロール位置にある最初のマーカーとみなします。

1つ以上のスクロールコンテナがスクロールされる、またはレイアウト変更により最終スクロール位置が変化した際、 ユーザーエージェントは、ターゲットスクロール位置をもとに各スクロールマーカーグループのアクティブマーカーを決定・更新すべきです。

3.1.6. アクティベーションの挙動

3.1.7. フォーカスの挙動

スクロールマーカーがアクティブ化された場合、 次のtabindex順フォーカスナビゲーションは、スクロールターゲットがフォーカス可能ならそれにフォーカスし、 そうでなければスクロールターゲットから次のフォーカス可能要素を探してフォーカスします。

3.2. スクロールボタン

::scroll-button( <scroll-button-direction> ) 疑似要素は、 算出されたcontent値がnone以外の場合に スクロールコンテナ上で生成されます。 これらは自身の生成元要素の直前の兄弟要素としてボックスを生成し、 内容はcontentで指定された通りとなります。 ::scroll-marker-group疑似要素 （scroll-marker-group: before使用時）の後に存在します。

最大4つの::scroll-button()疑似要素が スクロールコンテナ上に存在でき、 それぞれがフロー相対方向に対応します。 生成元要素のwriting-mode に基づき、順番は block-start、 inline-start、 block-end、 inline-endです。 ::scroll-button()疑似要素はデフォルトでフォーカス可能かつアクティブ化可能であり、 アクティベーション時はその生成元要素を対応する方向に「1ページ」スクロールします。 （PgUp/PgDnキーの動作に類似。通常はscrollportサイズの約85%のスクロールです。） これらのキーと同様に、スクロールには意図された方向と終了位置があります。

[CSSOM-VIEW-1]に「ページ単位スクロール」アルゴリズムが追加予定です。 追加された時点で本仕様から参照可能になります。 10914号の解決案参照。

ボタンの順序はこれが最適か？ CSSの論理方向の通常順には合致しますが、手動で作成される類似ボタンは 縦横でグループ化（block-start/block-end→inline-start/inline-end）や 縦を横の「周り」に配置（block-start/inline-start/inline-end/block-end）することも多いです。

4つの::scroll-button()疑似要素は セレクタの引数で個別に選択できます。 <scroll-button-direction>の値は次の通りです：

up

down

left

right

物理的な方向に対応する::scroll-button()を選択します。

block-start

block-end

inline-start

inline-end

指定された::scroll-button()疑似要素を選択します。

prev

「block-start」または「inline-start」の ::scroll-button() のうち、originating element において「スクロール可能なページ数」が多い軸を選択します。 つまり、originating element の scrollable overflow height を scrollport の高さで割った値、 または幅についても同様です。

両方の寸法が同じ場合は、block-start の ::scroll-button() を選択します。

例えば、originating element の幅が800px、高さが500pxであり、 scrollable overflow area の幅が1200px、高さが1000pxだったとします。 水平方向のスクロールは1.5「ページ」（1200/800）に相当し、 垂直方向のスクロールは2「ページ」（1000/500）に相当します。 したがって（要素が英語の場合）、 ::scroll-button(prev) セレクターは block-start ボタンを選択します。

next

prev と同一ですが、 代わりに block-end または inline-end の ::scroll-button() を選択します。

複数ボタンを同じスタイルにしやすいような キーワード追加（all/horizontal/vertical/block/inlineなど）が必要か検討。

::scroll-button()は 完全スタイル可能な疑似要素です：適用プロパティに制限はありません。

:disabled疑似クラスは ::scroll-button()にも適用可能です。 これは、そのボタンの生成元要素が関連方向にスクロールできない場合に一致します。

UAスタイルシートで ::scroll-button()は button 要素と同じスタイル（disabled含む）にすべき。

::scroll-button()は ボタンの完全なUAスタイル（appearance:button）を使うべきか？それとも非ネイティブ（appearance:none）か？ 前者の場合、appearanceとの相互作用定義が必要。

3.3. フォーカスナビゲーション順序

上記の機能は複数のフォーカス可能疑似要素を生成します。 これら疑似要素は要素ツリー内で位置が定義されていますが、 フォーカスナビゲーション（タブ順）として最適な位置ではありません。

代わりに、 スクロールコンテナと 本章で定義された各種疑似要素間のフォーカスナビゲーション順序は次の通りです：

1. ::scroll-marker-group疑似要素 （スクロールコンテナがscroll-marker-group: beforeの場合）

   注: ::scroll-marker疑似要素は スクロールコンテナ子孫として生成され、 この::scroll-marker-group下に再配置され、 「フォーカスグループ」としてまとめてナビゲートされます。

2. ::scroll-button()疑似要素（定義順）

3. スクロールコンテナ自身とその内容（通常のフォーカス順）

4. ::scroll-marker-group疑似要素 （スクロールコンテナがscroll-marker-group: afterの場合）

付録A: オーバーフローの転送

本セクションは非常に実験的です。 continue プロパティの拡張で追加ユースケースを解決する試みを記述していますが、 現時点で合意はありません。 議論促進のため提示していますが、実験的でない実装は推奨されません。

CSS Level 1 [CSS1] では、指定サイズの要素に内容が収まりきらない場合、 それは一般的に著者のミスでした。 内容は要素外に拡張され、他の要素と重なることがありました。

CSS Level 2 [CSS2]では overflow プロパティが導入され、 オーバーフローをスクロールで処理できるようになりました（著者ミスではなくなる）。 また、クリッピングで処理する指定も可能となり、 内容を表示しない意図の場合に有用です。 これはCSS Overflow Module Level 3 [CSS-OVERFLOW-3]でさらに洗練されました。

しかし、スクロールは多量の内容を提示する唯一の方法ではなく、 最適とも限りません。 コーデックスが巻物に代わったのも、その利点ゆえです。

本仕様は、ページの要素がオーバーフローをスクロールでなく ページ分割で処理するよう指定する仕組みを導入します。

さらに本仕様はオーバーフローの概念を拡張します。 著者が一つの領域だけを指定せず、 複数の断片（各自の寸法とスタイル）を指定でき、 要素内容が必要なだけ断片を使って流れる（オーバーフローしない）ようにできます。

いずれの場合も、実装はブロック進行方向で内容を分割する必要があります。 その方法はCSS Fragmentation Module [CSS-BREAK-3]で説明されています。

オーバーフローのチャンネリング：continueプロパティ

continueプロパティは、 要素内に収まりきらない内容を断片化（[CSS-BREAK-3]の意味）し、 残り内容の継続先を指定できます。

このプロパティは伝統的なページ分割を説明し、さらに拡張します。

このプロパティと値の命名は暫定です。 当初は "fragmentation: auto | none | break | clone | page" として提案されました（https://lists.w3.org/Archives/Public/www-style/2015Jan/0357.html）、 まだどちらが良いか広く合意されていません。

このプロパティはregion-fragmentの一般化・置換を意図しています。 本仕様で十分安定したら、region-fragmentはregions仕様から削除されるべきです。

注: continue: fragmentsは、仕様初期の"overflow:fragments"を置換します。 continue: paginateは "overflow: paged-x | paged-y | paged-x-controls | paged-y-controls"を置換します。

auto

autoは、 CSS Region（リージョンチェーンの最後以外）でのみ算出値になりえます。 収まりきらない内容は次のリージョンへ送られます。

その他の場合、autoは他の値に算出されます。

CSS Overflow 4 § 5.3 Fragmentation of Overflow: the continue propertyの定義とは異なり、指定値が算出値となります。どちらのモデルが良いか？

overflow

収まりきらない内容はoverflowプロパティに従ってオーバーフローします。

paginate

収まりきらない内容はページ分割されます。 要素内でページ送りビューを作成し、'overflow: scroll'によるスクロールビューに似ています。

ページ分割オーバーフロー参照

注: 印刷は事実上ルートで"continue: paginate"です。

fragments

収まりきらない内容は要素自身を複製し、配置を続行します。

断片化オーバーフロー参照。

指定要素や疑似要素のcontinueの算出値は次の通りです：

1. layout containmentを持つ要素・疑似要素（[CSS-CONTAIN-1]参照）で、 指定値がautoまたはfragmentsの場合、 算出値はoverflowです。

2. それ以外で指定値がautoの場合

   1. CSS Region（リージョンチェーンの最後以外）なら算出値はauto

   2. ページ上なら算出値はpaginate

   3. fragment boxなら算出値はfragments

   4. それ以外は算出値はoverflow

3. 指定値がfragmentsの場合

   1. ページ上なら算出値はpaginate

   2. それ以外は算出値は指定値と同じ

4. その他は算出値は指定値と同じ

multicolのカラムを選択できる疑似要素追加時はauto算出値をautoにするか、 新値を導入してautoがそれに算出されるようにする必要があるかも（他要素での算出値は？）。

注: このプロパティに至る議論は overflow/overflow-x/overflow-y/overflow-styleの議論や fragmentationプロパティの提案を参照。

ページ分割オーバーフロー

このセクションでは、paginate値のcontinueプロパティの意味を導入・定義します。

このセクションは執筆中です

ページは@page規則でスタイル可能であるべきです。ネストしたページの場合はどうなる？

@media (overflow-block: paged), (overflow-block: optional-paged) {
  :root {
    continue: paginate;
  }
}

従来のページ分割（印刷時など）は :rootがページボックス内に含まれていることを仮定していますが、 ページボックスが:rootの子として疑似要素になるのではなく、 fragment boxのような何かで回避できるか？ それとも:root内にページボックス内にfragment box（:rootの複製）を置くべき？

ページボックスモデルが通常のCSSボックスの子の場合、その振る舞いは？

[CSS3GCPM]の初期案やOperaの実装では paginateの代わりに "paged-x | paged-y | paged-x-controls | paged-y-controls"の4値を使っていました。 このプロパティもこれらの値を含むべきか、あるいは別プロパティで扱うべきか？ （例："pagination-layout: auto | horizontal | vertical", "pagination-controls: auto | none"）

一度にNページを表示する能力は？ "pagination-layout: horizontal 2;"のような値で指定できる？

Brad Kemperがページ分割と 断片オーバーフローを組み合わせるモデル（複数ページ表示対応）を提案しています。https://lists.w3.org/Archives/Public/www-style/2015Mar/0241.html

ページ分割オーバーフローの現実装は continueプロパティではなく、 [CSS3GCPM]ドラフトや [CSS3-MARQUEE]案で提案された overflow/overflow-x/overflow-yプロパティを使っています。

断片化オーバーフロー

このセクションではfragments値のcontinueプロパティの意味を導入・定義します。

要素のcontinueの算出値がfragmentsの場合、 実装はその要素のためにfragment boxの列を生成しなければなりません。 （continue: fragmentsを持つ要素が1つだけfragment boxを生成することも可能です。 ただし、要素の算出continueが fragmentsでない場合、 そのボックスはfragment boxではありません。） すべてのfragment boxは断片化コンテナであり、 その断片化コンテナが断片化を引き起こすオーバーフローがある場合、 さらに別のfragment boxが前のものの次の兄弟として生成されます。 もしくは要素の次の兄弟として扱うべき？他のボックスレベル修正との相互作用を明確にする必要があります。 さらに、fragment boxが [css-multicol-1]で定義される マルチカラムボックスの場合（multi-column containerの定義）、 overflow columns [css-multicol-1]が作られるはずの内容は 代わりに追加のfragment boxへ流れます。 ただし、fragment box自体も外部の断片化コンテキスト（ページ・カラム・他のfragment boxなど）で分割されることがあり、 その場合は複数のfragment boxではなく、1つのfragment boxの複数断片となります。 （これはfragment boxがインデックスでスタイル指定可能なため重要です。 ページをまたいでfragment boxが分割されても、インデックスと内容の対応が崩れないようにする設計です。） 外部断片化コンテキストへの強制ブレーク時はfragment boxの新断片か新fragment boxか？ ここでfragment box以外の用語にした方が混乱が減る？

他種類の断片化コンテキスト内で分割された要素断片をスタイルしたい場合は？ これらのルールにより::nth-fragment()はその用途に使えないが、 名前自体はその用途に最も合理的に見える。

<!DOCTYPE HTML>
<title>内容を
  同じサイズのカードに分割</title>
<style>
  .in-cards {
    continue: fragments;

    width: 13em;
    height: 8em;

    padding: 4px;
    border: medium solid blue;
    margin: 6px;

    font: medium/1.3 Times New
      Roman, Times, serif;
  }
</style>
<div class="in-cards">
  この例では、div内のテキストが
  一連のカードに分割されます。
  これらのカードはすべて同じスタイルです。
  内容がカードをオーバーフローするほど十分にある場合、
  さらにカードが生成されます。2つめのカードは
  まさに最初のカードの次の兄弟として生成されます。
</div>

<!DOCTYPE HTML>
<style>
  .article {
    continue: fragments;
  }
  .article::first-letter {
    font-size: 2em;
    line-height: 0.9;
  }
  .article::nth-fragment(1) {
    font-size: 1.5em;
    max-lines: 3;
  }
  .article::nth-fragment(2) {
    column-count: 2;
  }
</style>
<div class="article">
  ...
</div>

continue: fragmentsは少なくとも一部のtable部品、 そして他の要素にも適用されないことを指定すべき。どれに適用しないか明確にする必要がある。

この仕様は どの種類の断片化コンテキストが作られるか明示すべき。 どのbreak-*プロパティ値が このコンテキスト内で分割を引き起こすか分かるようにする。 おそらくbreak-*: regionが適用されるべき。

この仕様は レイアウトが断片の本来的サイズによって利用可能空間を変える場合（例:[CSS3-GRID-LAYOUT]）の処理モデルが必要。 [CSS-REGIONS-1]で既に処理モデル案があり、 その内容や編集者は本仕様にも参考になるはず。

断片のスタイリング

::nth-fragment() 疑似要素

::nth-fragment()疑似要素は、 要素によって生成されたfragment boxの一部を記述するための疑似要素です。 この疑似要素の引数は[SELECT]で定義される :nth-child()疑似クラスの引数と同じ構文を取り、意味も同じですが 番号は兄弟でなくその要素が生成したfragment boxを基準に数えます。

注:断片を最後から数えて指定するセレクタは意図的に提供されていません。 そのようなセレクタは断片数の決定に影響を与えるためです。

将来の議論次第で、 ::nth-fragment(an+b)構文が ::fragment:nth(an+b)構文に置き換わる可能性があります。

断片のスタイル

これはcontinue:fragmentsのみに適用すべきか、continue:paginateにも適用すべきか？ （適用するなら、continue:paginateへのより厳しいプロパティ制限が必要になる。）

::nth-fragment()疑似要素規則がない場合、 各fragment boxの算出スタイルは そのfragment boxが生成された要素の算出スタイルとなります。 ただし、fragment boxのスタイルは、 セレクタの主部が::nth-fragment()疑似要素を含む規則にも影響されます。 その断片boxの1始まり番号が::nth-fragment()疑似要素と一致し、 セレクタ（::nth-fragment()疑似要素除く）が断片生成要素と一致する場合です。

fragment boxのスタイル決定時、 断片疑似要素に一致する規則と要素自体に一致する規則がカスケードされ、 断片疑似要素は疑似クラス並の特異性を加算します。 これもカスケーディングモジュールで明記必要？

<!DOCTYPE HTML>
<style>
  .bouncy-columns {
    continue: fragments;
    width: 6em;
    height: 10em;
    float: left;
    margin: 1em;
    font: medium/1.25 Times New
      Roman, Times, serif;
  }
  .bouncy-columns::nth-fragment(1) {
    background: aqua; color: black;
    transform: rotate(-3deg);
  }
  .bouncy-columns::nth-fragment(2) {
    background: yellow; color: black;
    transform: rotate(3deg);
  }
</style>
<div class="bouncy-columns">
  ...
</div>

::nth-fragment()疑似要素にcontinueプロパティでスタイル指定すると効果があります。 fragment boxの算出値が continueでfragments以外になった場合、そのfragment boxは最後の断片です。 ただし、最初の断片へのoverrideは、そのfragment boxが存在しないことにはなりません。 fragment boxの有無は要素のoverflow算出値で決まります。

::nth-fragment()疑似要素にcontentプロパティでスタイル指定しても効果はありません。 断片boxのcontent算出値は 要素のcontent算出値と同じです。

display: noneをfragment boxに指定すると そのインデックスのfragment boxは生成されません。 ただし、後続断片boxの::nth-fragment()疑似要素一致判定のための インデックスとしては生成されるものとして数えます。 ただし生成されないため内容は含みません。

他のdisplay値や position、 floatを指定することは許されますが、 内部display型は変更できません。 （continueは ブロック・flex・gridコンテナにのみ適用されます。） この挙動の詳細仕様が必要

他の疑似要素同様、疑似要素は対応する要素内に属するモデルに合わせて、 ::nth-fragment()疑似要素宣言は 疑似要素なし規則の宣言を上書きします。 優先順位は通常のカスケード順（[CSS2]参照）で決定されます。

::nth-fragment()疑似要素へのスタイル指定は fragment box内の内容への継承に影響します。 つまり、fragment box内の内容は 要素自身でなく疑似要素スタイル（fragment boxスタイル）から継承されます。 そのため、断片box間で分割された要素はそれぞれ異なるスタイルになることがあります。

この継承ルールにより、 inheritや ::first-letterなど 直接指定できないプロパティも間接指定できてしまうが、 断片内スタイルの制限は継承にも適用すべき。

<!DOCTYPE HTML>
<style>
  .article {
    continue: fragments;
  }
  .article::nth-fragment(1) {
    font-size: 1.5em;
    margin-bottom: 1em;
    height: 4em;
  }
  .article::nth-fragment(2) {
    margin-left: 5em;
    margin-right: 2em;
  }
</style>
<div class="article">
  <code>font-size</code> プロパティ...
</div>

断片内のスタイリング

これはcontinue:fragmentsのみに適用すべきか、continue:paginateにも適用すべきか？

::nth-fragment()疑似要素は fragment box内の内容のスタイルにも利用できます。 ::first-lineや::first-letter疑似要素とは異なり、 ::nth-fragment()疑似要素は セレクタの主部以外の部分にも付与可能です。 特に、主部の祖先にも一致させることができます。 ただし、そのようなセレクタ規則で適用されるCSSプロパティは ::first-letter疑似要素に適用できるプロパティに限ります。

より厳密には、 セレクタの主部以外の部分に::nth-fragment()疑似要素が付与された場合、 その規則の宣言は次の場合に断片（またはその疑似要素）へ適用されます：

1. 宣言が::first-letter疑似要素に適用できるプロパティであること。

2. 宣言が、もしその::nth-fragment()疑似要素を除去した場合に その断片（またはその疑似要素）に適用されるものであり、 各単純セレクタ列と一致する要素との関係が明確に対応付けられていること。

3. 除去された各::nth-fragment()疑似要素について、 その断片は、疑似要素が付与されていたセレクタに対応する要素のfragment box内に存在し、 そのインデックスが疑似要素と一致すること。

<!DOCTYPE HTML>
<style>
  .dark-columns {
    continue: fragments;
    width: 6em;
    height: 10em;
    float: left;
    margin-right: 1em;
    font: medium/1.25 Times New
      Roman, Times, serif;
  }
  .dark-columns::nth-fragment(1) {
    background: aqua; color: black;
  }
  .dark-columns::nth-fragment(1) :link {
    color: blue;
  }
  .dark-columns::nth-fragment(1) :visited {
    color: purple;
  }
  .dark-columns::nth-fragment(2) {
    background: navy; color: white;
  }
  .dark-columns::nth-fragment(2) :link {
    color: aqua;
  }
  .dark-columns::nth-fragment(2) :visited {
    color: fuchsia;
  }
</style>
<div class="dark-columns">
  ...
</div>

付録C: プライバシーに関する考慮事項

この仕様は新たなプライバシーに関する考慮事項を導入しません。

付録D: セキュリティに関する考慮事項

この仕様は新たなセキュリティに関する考慮事項を導入しません。

レベル4からの変更点

未定

謝辞

特に、Rossen Atanassov、Bert Bos、Tantek Çelik、John Daggett、fantasai、Daniel Glazman、Vincent Hardy、Håkon Wium Lie、Peter Linss、Robert O’Callahan、Florian Rivoal、Alan Stearns、Steve Zilles、そしてwww-styleコミュニティ全体からのフィードバックに感謝します。