1. はじめに
この仕様は、::marker 疑似要素、 マーカーを生成する list-item 表示型、 およびマーカーの配置とスタイルを制御するいくつかのプロパティを定義します。
また、カウンターも定義します。 これは特殊な数値オブジェクトであり、 マーカーのデフォルト内容を生成するためによく使用されます。
< style > li :: marker { content : "(" counter( list-item , lower-roman ) ")" ; } li { display : list-item ; } </ style > < ol > < li > これは最初の項目です。< li > これは2番目の項目です。< li > これは3番目の項目です。</ ol >
次のような結果になるはずです:
(i) これは最初の項目です。 (ii) これは2番目の項目です。 (iii) これは3番目の項目です。
注: この例は通常 HTML で必要とされるよりもはるかに冗長であることに注意してください。 必要なスタイルの大部分は UA のデフォルトスタイルシートが処理するためです。
子孫セレクターと子セレクターを使用すると、 ネストされたリストの深さに応じて異なるマーカー型を指定できます。
1.1. 値の定義
この仕様は、[CSS2] の CSS プロパティ 定義規則に従い、[CSS-VALUES-3] の 値定義構文を使用します。 この仕様で定義されていない値型は CSS Values & Units [CSS-VALUES-3] で定義されています。 他の CSS モジュールとの組み合わせにより、これらの値型の定義が拡張される場合があります。
それぞれの定義に記載されているプロパティ固有の値に加えて、 この仕様で定義されるすべてのプロパティは、 プロパティ値として CSS 全体キーワードも受け入れます。 読みやすさのため、それらは明示的に繰り返し記載していません。
2. リスト項目の宣言
リスト項目とは、 display プロパティが list-item に設定された任意の要素です。リスト項目は ::marker 疑似要素を生成します。 他の要素は生成しません。 さらに、リスト項目は、暗黙の list-item カウンターを自動的にインクリメントします（§ 4.6 暗黙の list-item カウンターを参照）。
3. マーカー
リスト項目 表示型を特徴づけるものは、その マーカーです。 これは、リスト内の各 リスト項目の先頭を示すのに役立つ記号または序数です。 CSS レイアウトモデルでは、リスト項目の マーカーは、 各 リスト 項目に関連付けられた マーカーボックスによって表されます。 この マーカーの内容は、 リスト項目上の list-style-type および list-style-image プロパティと、その ::marker 疑似要素にプロパティを割り当てることによって制御できます。
3.1. ::marker 疑似要素
マーカーボックスは、 リスト項目の ::marker 疑似要素によって、その リスト 項目の最初の子として、 ::before 疑似要素 （その要素に存在する場合）より前に生成されます。 その内容は、 § 3.2 マーカー内容の生成で定義されているとおりに設定されます。
< style > p { margin-left : 12 em ; } p . note { display : list-item ; counter-increment : note-counter ; } p . note :: marker { content : "注 " counter( note - counter ) ":" ; } </ style > < p > これはこの文書の最初の段落です。< p class = "note" > これは非常に短い文書です。< p > これで終わりです。
次のようにレンダリングされるはずです:
これはこの文書の最初の段落
です。
注 1: これは非常に短い
文書です。
これで終わりです。
< style > p { margin-left : 8 em } /* カウンター用の空間を確保 */ li { list-style-type : lower-roman ; } li :: marker { color : blue ; font-weight : bold ; } </ style > < p > これは前にある長い段落です ...< ol > < li > これは最初の項目です。< li > これは2番目の項目です。< li > これは3番目の項目です。</ ol > < p > これは後にある長い段落です ...
上記の文書は、次のようにレンダリングされるはずです:
これは前にある長い
段落です ...
i. これは最初の項目です。
ii. これは2番目の項目です。
iii. これは3番目の項目です。
これは後にある長い
段落です ...
以前は、マーカーをスタイル設定する唯一の方法は継承を利用することでした。 目的のマーカースタイルをリスト項目に設定し、 その後、リスト項目の実際の内容を囲むラッパー要素上でそれを元に戻す必要がありました。
マーカーボックスは リスト項目にのみ存在します: その他の要素では、 ::marker 疑似要素の content プロパティの算出値は none でなければならず、 これによりその生成が抑制されます。
3.1.1. ::marker に適用されるプロパティ
すべてのプロパティは ::marker 疑似要素に設定でき、 算出値を持ちます。 ただし、 実際に マーカーボックスに適用される CSS プロパティは次のものだけです:
- text-combine-upright、unicode-bidi、および direction プロパティ（[CSS-WRITING-MODES-3] を参照）
- content プロパティ（下記の § 3.2 マーカー 内容の生成を参照）
- すべてのアニメーションおよびトランジションプロパティ（[CSS-ANIMATIONS-1] および [CSS-TRANSITIONS-1] を参照）
将来の仕様では、このプロパティ一覧が拡張されることが想定されています。 ただし現時点では outside マーカーボックスのレイアウトが完全には定義されていないため、 これらのプロパティのみが許可されています。
その他のプロパティは、カスケードの 作成者オリジンで設定された場合、 マーカーボックスに影響を与えてはなりません。 UA は、そのようなプロパティを適用されないものとして扱うか、 ユーザーエージェント オリジンの !important 規則を設定してその値を強制してもかまいません。 ただし、テキストに適用される継承可能なプロパティは、 ::marker 疑似要素に設定できます: これらはそのテキスト内容に継承され、効果を持ちます。
- white-space、text-transform、letter-spacing（[CSS-TEXT-3] を参照）
- すべてのフォントプロパティ（[CSS-FONTS-3] および その後継仕様を参照）
- color プロパティ（[CSS-COLOR-3] を参照）
UA は、デフォルトスタイルシートに次の規則を追加しなければなりません:
::marker, ::before::marker, ::after::marker {
unicode-bidi: isolate;
font-variant-numeric: tabular-nums;
white-space: pre;
text-transform: none;
}
注: ::marker 疑似要素は、
::before または ::after
疑似要素の マーカーボックスを表すことができますが、
::marker という 複合セレクターは
*::marker に展開されるため [SELECTORS-4]、
これらのマーカーを選択しません—
white-space: pre は、適切な動作とは少し異なります。text-space-collapse: preserve-spaces + text-space-trim: discard-after の方が、ここで必要なものに近いかもしれません。 Issue 4448 および Issue 4891 の議論を参照してください。
3.2. マーカー内容の生成
マーカーボックスの内容は、 次の条件のうち最初に真となるものによって決定されます:
- content が ::marker 自体で normal ではない
- マーカーボックスの内容は、 content プロパティによって定義されるとおりに、 ::before の場合とまったく同じように決定されます。
- list-style-image が 起点要素上で マーカー画像を定義している
- 'マーカーボックスには、 指定された マーカー画像を表す 匿名の インライン 置換要素が含まれ、 その後に単一の空白（U+0020 SPACE）からなる テキストランが続きます。
- list-style-type が 起点要素上で マーカー文字列を定義している
- マーカーボックスには、 指定された マーカー文字列からなる テキストランが含まれます。
- それ以外
- マーカーボックスには内容がなく、 ::marker はボックスを生成しません。
さらに、UA は保持された 強制改行を 空白に変換するか破棄してもかまいません。
3.3. 画像マーカー: list-style-image プロパティ
| 名前: | list-style-image |
|---|---|
| 値: | <image> | none |
| 初期値: | none |
| 適用対象: | リスト項目 |
| 継承: | する |
| パーセンテージ: | 該当なし |
| 算出値: | キーワード none または算出された <image> |
| 正規順序: | 文法に従う |
| アニメーション型: | 離散 |
マーカー 画像を指定します。 これは、リスト項目の content が normal のとき、その マーカーを満たすために使用されます。 値は次のとおりです:
- <image>
- <image> が 有効な画像を表す場合、 要素の マーカー 画像をその <image> として指定します。 それ以外の場合、 要素には マーカー画像がありません。
- none
- 要素には マーカー 画像がありません。
li{ list-style-image : url ( "http://www.example.com/ellipse.png" ) }
3.4. テキストベースのマーカー: list-style-type プロパティ
| 名前: | list-style-type |
|---|---|
| 値: | <counter-style> | <string> | none |
| 初期値: | disc |
| 適用対象: | リスト項目 |
| 継承: | する |
| パーセンテージ: | 該当なし |
| 算出値: | 指定値 |
| 正規順序: | 文法に従う |
| アニメーション型: | 離散 |
マーカー 文字列を指定します。 これは、リスト項目の content 値が normal で、マーカー画像がない場合に、その マーカーを満たすために使用されます。 値は次のとおりです:
- <counter-style>
-
要素の マーカー
文字列を、
指定された <counter-style>を使用して表現した
list-item カウンターの値として指定します。
具体的には、 マーカー文字列は、 指定された <counter-style>を使用して list-item カウンター値の カウンター表現を生成した結果であり、 その前に <counter-style> の 接頭辞が付き、 その後に <counter-style> の 接尾辞が続きます。 指定された <counter-style> が存在しない場合、decimal が 使用されるものとします。
- <string>
- 要素の マーカー 文字列は、指定された <string> です。
- none
- 要素には マーカー 文字列がありません。
ul{ list-style-type : "★" ; } /* マーカーを「星」文字に設定する */ p.note{ display : list-item; list-style-type : "注: " ; list-style-position : inside; } /* 注の段落に文字列「注: 」からなるマーカーを与える */ ol{ list-style-type : upper-roman; } /* すべての順序付きリストで upper-roman カウンタースタイルを使用する （Counter Styles 仕様 [[CSS-COUNTER-STYLES]] で定義） */ ul{ list-style-type : symbols ( cyclic'○' '●' ); } /* すべての順序なしリスト項目のマーカーを、空の円と 塗りつぶされた円で交互にする。 */ ul{ list-style-type : none; } /* list-style-image に有効な画像が指定されていない限り、 マーカーを完全に抑制する。 */
3.5. マーカーの配置: list-style-position プロパティ
| 名前: | list-style-position |
|---|---|
| 値: | inside | outside |
| 初期値: | outside |
| 適用対象: | リスト項目 |
| 継承: | する |
| パーセンテージ: | 該当なし |
| 算出値: | キーワード。ただし本文を参照 |
| 正規順序: | 文法に従う |
| アニメーション型: | 離散 |
このプロパティは、::marker をインラインでレンダリングするか、 リスト 項目のすぐ外側に配置するかを指定します。 値は次のとおりです:
- inside
- 特別な効果はありません。 （::marker は リスト項目の内容の先頭にあるインライン要素です。）
- outside
-
リスト項目が ブロックコンテナーの場合:
マーカーボックスは ブロックコンテナーであり、
主要ブロックボックスの外側に配置されます。
ただし、フロートに隣接するリスト項目マーカーの位置は未定義です。
CSS は、マーカーボックスの正確な位置
またはペイント順序における位置を指定しませんが、
marker-side が示すボックスの 書字モードを使用して、
ボックスの inline-start 側に配置することを要求します。
マーカーボックスは主要ブロックボックスのボーダーに対して固定され、
主要ボックスの内容とともにスクロールしません。
要素の overflow が visible 以外の場合、UA はマーカーを非表示にしてもかまいません。
（この許容事項は将来変更される可能性があります。）
マーカーボックスのサイズまたは内容は、
主要ブロックボックスの高さ
および/またはその最初の行ボックスの高さに影響を与える場合があり、
場合によっては新しい行ボックスの生成を引き起こすことがあります。
この相互作用も定義されていません。
これは CSS2 由来の曖昧な 記述であり、実際の定義が必要です。
リスト項目が インラインボックスの場合: この値は inside と同等です。
代わりに、outside は、マーカーを主要インラインボックスの 直前の兄弟としてレイアウトすることも考えられます。
<style>
ul.compact { list-style: inside; }
ul { list-style: outside; }
</style>
<ul class=compact>
<li>最初の "inside" リスト項目が最初に来る</li>
<li>2番目の "inside" リスト項目が最初に来る</li>
</ul>
<hr>
<ul>
<li>最初の "outside" リスト項目が最初に来る</li>
<li>2番目の "outside" リスト項目が最初に来る</li>
</ul>
上記の例は次のように整形される場合があります:
* 最初の "inside" リスト 項目が最初に来る * 2番目の "inside" リスト 項目が2番目に来る ======================== * 最初の "outside" リスト 項目が最初に来る * 2番目の "outside" リスト 項目が2番目に来る
3.6. マーカーのスタイル設定: list-style 一括指定 プロパティ
| 名前: | list-style |
|---|---|
| 値: | <'list-style-position'> || <'list-style-image'> || <'list-style-type'> |
| 初期値: | 個々のプロパティを参照 |
| 適用対象: | リスト項目 |
| 継承: | 個々のプロパティを参照 |
| パーセンテージ: | 個々のプロパティを参照 |
| 算出値: | 個々のプロパティを参照 |
| アニメーション型: | 個々のプロパティを参照 |
| 正規順序: | 文法に従う |
list-style プロパティは、 list-style-type、list-style-image、および list-style-position の3つのプロパティを スタイルシート内の同じ場所で設定するための一括指定表記です。
ul{ list-style : upper-roman inside} /* 任意の UL */ ul ul{ list-style : circle outside} /* UL の子である任意の UL */
一括指定で none という値を使用することは、潜在的に曖昧です。 none は list-style-image と list-style-type の両方に有効な値だからです。 この曖昧さを解消するため、 一括指定内の none 値は、その一括指定によって他の方法で設定されていない 2つのプロパティのいずれかに適用されなければなりません。
list-style : none disc; /* 画像を "none" に、型を "disc" に設定する。 */ list-style: noneurl ( bullet.png ); /* 画像を "url(bullet.png)" に、型を "none" に設定する。 */ list-style: none; /* 画像と型の両方を "none" に設定する。 */ list-style: none discurl ( bullet.png ); /* 構文エラー */
注: list-style-type の <counter-style> 値も文法上の曖昧さを生じさせる可能性があります。 このような値は最終的に <custom-ident> 値であるため、 [CSS-VALUES-3] の構文解析規則が適用されます。
li）
に直接指定できますが、
注意して行うべきです。
次の規則を考えてみます:
ol.alpha li{ list-style : lower-alpha; } ul li{ list-style : disc; }
上記は期待どおりには動作しません。
ol class=alpha の中に ul
をネストすると、
最初の規則の詳細度によって、その ul
の
リスト項目が lower-alpha スタイルを使用することになります。
ol.alpha > li{ list-style : lower-alpha; } ul > li{ list-style : disc; }
これらは意図したとおりに動作します。
ol.alpha{ list-style : lower-alpha; } ul{ list-style : disc; }
こちらはさらに優れています。 継承によって list-style 値がリスト項目に引き継がれるためです。
3.7. marker-side プロパティ
| 名前: | marker-side |
|---|---|
| 値: | match-self | match-parent |
| 初期値: | match-self |
| 適用対象: | リスト項目 |
| 継承: | する |
| パーセンテージ: | 該当なし |
| 算出値: | 指定されたキーワード |
| 正規順序: | 文法に従う |
| アニメーション型: | 離散 |
marker-side プロパティは、 outside の マーカーボックスを、 リスト項目自体（すなわち、その 起点要素）の方向性に基づいて配置するか、 リストコンテナー（すなわち、起点 要素の親）の方向性に基づいて配置するかを指定します。 前者の場合、マーカーの位置は同じリスト内の各項目で異なる場合があり、 各リスト項目に個別に割り当てられた方向性に基づきます。 後者の場合、それらはすべて同じ側に揃えられ、 リスト全体に割り当てられた方向性によって決定されます。
- match-self
- マーカーボックスは、 ::marker の 起点要素の方向性を使用して配置されます。
- match-parent
- マーカーボックスは、 ::marker の 起点要素の親要素の方向性を使用して配置されます。
次の2つのレンダリング例はいずれも、次の HTML から生成されます。 唯一の違いは、リスト上の marker-side の値です:
< ul > < li > 英語 1< li dir = rtl > OWT WERBEH< li > 英語 3< li dir = rtl > RUOF WERBEH</ ul >
| match-self | match-parent |
|---|---|
* 英語 1
OWT WERBEH *
* 英語 3
RUOF WERBEH *
|
* 英語 1 * OWT WERBEH * 英語 3 * RUOF WERBEH |
この順序でマーカー内の句読点を 正しく配置するには、 親の direction 値も考慮する必要があります。<https://github.com/w3c/csswg-drafts/issues/4202>
キーワードの名前変更および list-style-position との統合について未解決の課題があります。
4. カウンターによる自動番号付け
カウンターは、 CSS でリスト項目を自動的に番号付けすることなどに使用される特殊な数値トラッカーです。 すべての要素は0個以上のカウンターの集合を持ち、 それらは継承されるプロパティ値と同様の方法で文書ツリーを通じて継承されます。カウンターには 名前と 作成者があり、 これらによってカウンターが識別され、 さらに整数の 値を持ちます。 それらは、 カウンタープロパティ counter-increment、counter-set、および counter-resetによって作成および操作され、 counter() および counters() 関数記法で使用されます。
カウンターは CSS 構文内で <counter-name> 型を使用して参照され、 これはその名前を <custom-ident> として表します。 <counter-name> の名前は、キーワード none と一致してはなりません。 そのような識別子は <counter-name> として 無効です。
ある要素上の カウンター値の解決は、 複数段階の処理です:
-
既存のカウンターは、前の要素から 継承されます。
-
新しいカウンターが インスタンス化されます（counter-reset）。
-
カウンター値がインクリメントされます（counter-increment）。
-
カウンター値が明示的に設定されます（counter-set）。
-
カウンター値が使用されます（counter()/counters()）。
UA は、カウンターの最大値または最小値について 実装固有の制限を持つ場合があります。 カウンターのリセット、設定、またはインクリメントによって 値がその範囲外になる場合、 値はその範囲にクランプされなければなりません。
4.1. カウンターの作成: counter-reset プロパティ
| 名前: | counter-reset |
|---|---|
| 値: | [ <counter-name> <integer>? ]+ | none |
| 初期値: | none |
| 適用対象: | すべての要素 |
| 継承: | しない |
| パーセンテージ: | 該当なし |
| 算出値: | キーワード none、または各項目が識別子と整数の組であるリスト |
| 正規順序: | 文法に従う |
| アニメーション型: | 算出値の型による |
ユーザーエージェントは、非視覚メディアを含むすべてのメディアでこのプロパティをサポートすることが期待されています。
counter-reset プロパティは、要素上に新しい カウンターを インスタンス化し、 指定された整数値に設定します。 値は次のように定義されます:
- none
- この要素は新しいカウンターを作成しません。
- <counter-name> <integer>?
- 指定された <counter-name> のカウンターを、指定された <integer> を開始値として インスタンス化します。 省略時は 0 です。
h1{ counter-reset : section-1 } h1{ counter-reset : imagenum99 }
では imagenum だけがリセットされます。 両方のカウンターをリセットするには、 まとめて指定する必要があります:
H1{ counter-reset : section-1 imagenum99 }
同じ原則は、counter-set および counter-increment プロパティにも適用されます。 [css-cascade-4] を参照してください。
プロパティ値内に同じ <counter-name> の複数のインスタンスがある場合、 最後のものだけが有効になります。
4.2. カウンター値の操作: counter-increment および counter-set プロパティ
| 名前: | counter-increment |
|---|---|
| 値: | [ <counter-name> <integer>? ]+ | none |
| 初期値: | none |
| 適用対象: | すべての要素 |
| 継承: | しない |
| パーセンテージ: | 該当なし |
| 算出値: | キーワード none、または各項目が識別子と整数の組であるリスト |
| 正規順序: | 文法に従う |
| アニメーション型: | 算出値の型による |
ユーザーエージェントは、非視覚メディアを含むすべてのメディアでこのプロパティをサポートすることが期待されています。
| 名前: | counter-set |
|---|---|
| 値: | [ <counter-name> <integer>? ]+ | none |
| 初期値: | none |
| 適用対象: | すべての要素 |
| 継承: | しない |
| パーセンテージ: | 該当なし |
| 算出値: | キーワード none、または各項目が識別子と整数の組であるリスト |
| 正規順序: | 文法に従う |
| アニメーション型: | 算出値の型による |
ユーザーエージェントは、非視覚メディアを含むすべてのメディアでこのプロパティをサポートすることが期待されています。
counter-increment および counter-set プロパティは、 既存の カウンターの値を操作します。 指定された名前のカウンターが要素上にまだ存在しない場合に限り、 新しいカウンターを インスタンス化します。 値は次のように定義されます:
- none
- この要素は、いずれのカウンターの値も変更しません。
- <counter-name> <integer>?
-
要素上の指定された名前のカウンターの値を、
指定された <integer> に設定（counter-set の場合）するか、
指定された値だけインクリメント（counter-increment の場合）します。
<integer> が省略された場合、
デフォルトは 1（counter-increment の場合）
または 0（counter-set の場合）です。
現在、要素上に指定された名前のカウンターが存在しない場合、 要素は、その値を設定またはインクリメントする前に、 開始値 0 でその名前の新しいカウンターを インスタンス化します。
この例は、「第1章」、「1.1」、「1.2」などの形式で章と節に番号を付ける方法を示します。
h1 : :before{ content : "第" counter ( chapter) "章 " ; counter-increment : chapter; /* chapter に 1 を加える */ counter-reset: section; /* section を 0 に設定する */ } h2::before{ content : counter ( chapter) "." counter ( section) " " ; counter-increment : section; }
プロパティ値内に同じ <counter-name> の複数のインスタンスがある場合、 それらはすべて順番に処理されます。 したがってインクリメントは累積しますが、 設定値は最後のものだけが有効になります。
4.3. ネストされたカウンターとスコープ
カウンターは「自己ネスト」します。親から同じ名前の カウンターを継承した要素上で 新しいカウンターを インスタンス化すると、 同じ名前の新しいカウンターが、 既存のカウンターの内側にネストして作成されます。 これは HTML のリストのような状況で重要です。 リストは任意の深さまでリスト内にネストできるため、 各レベルについて一意な名前のカウンターを定義することは不可能だからです。 counter() 関数は、要素上の指定された名前の 最内カウンターのみを取得しますが、 counters() 関数は、その要素を包含する指定された名前のすべてのカウンターを使用します。
したがって、カウンターの スコープは、 文書内でそのカウンターを最初に インスタンス化する要素から始まり、 その要素の子孫、およびその後続の兄弟とその子孫を含みます。 ただし、その要素の後続の兄弟上の counter-reset によって作成された同名カウンターのスコープ内にある要素は含みません。 これにより、そのような明示的なカウンターのインスタンス化が、 それ以前の兄弟のカウンターを覆い隠すことができます。
カウンターのスコープとその値を管理する正確な規則については、§ 4.4 カウンターの作成と継承を参照してください。
ol{ counter-reset : item} li{ display : block} li::before{ content : counter ( item) ". " ; counter-increment : item}
この例では、 ol がカウンターを作成し、 ol のすべての子はそのカウンターを参照します。
item カウンターの n番目のインスタンスを itemn と表すと、 次の HTML 断片は示されたカウンターを使用します。
<ol> item0 が作成され、0 に設定される
<li> item0 が 1 にインクリメントされる<li> item0 が 2 にインクリメントされる
<ol> item1 が作成され、0 に設定され、item0 内にネストされる
<li> item1 が 1 にインクリメントされる<li> item1 が 2 にインクリメントされる<li> item1 が 3 にインクリメントされる
<ol> item2 が作成され、0 に設定され、
item1 内にネストされる
<li> item2 が 1 にインクリメントされる</ol>
<li> item1 が 4 にインクリメントされる
<ol> item3 が作成され、0 に設定され、
item1 内にネストされる
<li> item3 が 1 にインクリメントされる</ol>
<li> item1 が 5 にインクリメントされる</ol>
<li> item0 が 3 にインクリメントされる<li> item0 が 4 にインクリメントされる</ol>
<ol> item4 が作成され、0 に設定される
<li> item4 が 1 にインクリメントされる<li> item4 が 2 にインクリメントされる</ol>
4.4. カウンターの作成と継承
文書内の各要素または疑似要素は、 その要素の スコープ内に、 （空である可能性のある）カウンターの集合を持ちます。 これは別の要素からの継承、 またはその要素上で直接インスタンス化することによって得られます。 これらのカウンターは CSS カウンター集合として表されます。 これは 集合であり、その各値は次のものからなる タプルです: 文字列 （カウンターの 名前を表す）、 要素（カウンターの 作成者を表す）、 および整数（カウンターの 値を表す）。 その集合内の指定された名前を持つ最後の カウンターが、 その名前の 最内 カウンターを表します。
4.4.1. カウンターの継承
-
element が文書ツリーの ルートである場合、 その要素は初期状態で空の CSS カウンター集合を持ちます。 戻ります。
-
element 自身の CSS カウンター集合を表す element counters を、 element の親要素の CSS カウンター集合のコピーとします。
-
sibling counters を、element の直前の兄弟（存在する場合）の CSS カウンター集合とし、 それ以外の場合は空の CSS カウンター集合とします。
sibling counters の各 counter について、 element counters に同じ 名前のカウンターがまだ含まれていない場合、 counter のコピーを element counters に追加します。
-
value source を、 ツリー 順序で element の直前にある要素の CSS カウンター集合とします。
value source の各 source counter について、 element counters が同じ 名前と 作成者を持つ 包含する カウンターを持つ場合、 そのカウンターの 値を source counter の 値に設定します。
<ul style='counter-reset: example 0;'>
<li id='foo' style='counter-increment: example;'>
foo
<div id='bar' style='counter-increment: example;'>bar</div>
</li>
<li id='baz'>
baz
</li>
</ul>
ツリー順序は文書ツリーを順序付きリストに変換し、 要素はその子より前に来て、 その子は次の兄弟より前に来ることを思い出してください。 言い換えると、 HTML のような言語では、 パーサーが文書を読み取る際に開始タグに遭遇する順序です。
ここでは、
ul
要素が example という名前の新しいカウンターを確立し、
その値を 0 に設定します。
#foo 要素は、
ul
の最初の子であるため、
このカウンターを継承します。
その親は、ツリー
順序において直前の要素でもあるため、
値 0 も一緒に継承し、
その直後に値を 1 にインクリメントします。
#bar 要素でも同じことが起こります。 この要素は #foo から example カウンターを継承し、 値 1 も同様に継承して、 それを 2 にインクリメントします。
ただし、#baz 要素は少し異なります。 この要素は、直前の兄弟である #foo 要素から example カウンターを継承します。 ただし、カウンターとともに #foo から値 1 を継承するのではなく、 ツリー順序における直前の要素である #bar から 値 2 を継承します。
この動作により、単一のカウンターを文書全体で使用し、 継続的にインクリメントできるため、 文書のネスト構造を作者が気にする必要がなくなります。
注: カウンターの継承は、通常の CSS の継承と同様に、 [DOM] のコンテキストにおける「平坦化された要素ツリー」 に対して作用します。
4.4.2. カウンターのインスタンス化
-
counters を element の CSS カウンター集合とします。
-
innermost counter を、counters 内で名前が name である最後のカウンターとします。 innermost counter の生成元要素が element または element の以前の兄弟である場合、counters から innermost counter を削除します。
-
名前が name、 生成元要素が element、 初期値が value である新しいカウンターを counters に追加します
4.5. ボックスを生成しない要素内のカウンター
ボックスを生成しない要素 （たとえば、display が none に設定された要素、または content が none に設定された疑似要素） は、カウンターを設定、リセット、またはインクリメントできません。 カウンタープロパティ自体はそのような要素でも有効ですが、 効果を持ってはなりません。
h2{ counter-increment : count2; } h2.secret{ display : none; }
注: visibility を に設定するなど、 要素を「隠す」その他の方法でも、 要素は引き続きボックスを生成するため、 ここでの例外には該当しません。
置換要素の子孫
（HTML の
option
や SVG の
rect
など）
がカウンターを設定、リセット、またはインクリメントできるかどうかは
未定義です。
注: 置換 要素の子孫における動作は、 実装間の相互運用性が欠如しているため、現在のところ未定義です。
4.6. 暗黙の list-item カウンター
作者がスタイル内で明示的に定義するカウンターに加えて、リスト項目は、 特別な list-item カウンターを自動的にインクリメントします。 これは、リスト項目上でデフォルトのマーカー文字列を生成するときに使用されます（ list-style-type を参照）。
具体的には、 counter-increment プロパティが list-item カウンターに対して別の増分を明示的に指定していない限り、 すべてのリスト 項目で 1 ずつインクリメントされなければならず、 通常カウンターが インクリメントされるのと同じ時点で行われます （ちょうど、そのリスト項目の counter-increment 値に list-item 1 が追加されたかのように、 新しいカウンターをインスタンス化する可能性などの副作用も含めて処理されます）。 これは、counter-increment の 指定値または算出 値には影響しません。
ただし、自動的な list-item のインクリメントは、 リスト項目の counter-increment が list-item カウンターを明示的に指定した場合には行われないため、li { counter-increment: list-item 2; } は、指定どおり list-item を 2 だけインクリメントし、 list-item 1 が無条件に追加された場合のように 3 だけインクリメントすることはありません。
これにより、自動的な list-item カウンターのインクリメントを、 たとえば counter-increment: list-item 0; のように明示的に上書きして無効にすることもできます。
その他のすべての点で、list-item カウンターは他のあらゆるカウンターと同様に動作し、 作者が使用および操作して、 リスト項目のスタイルを調整したり、 その他の目的に使用したりできます。
次の例では、 リストが 2 ずつ数えるように変更されています:
ol.evens > li { counter-increment: list-item 2; }
3 項目のリストは次のようにレンダリングされます
2. 最初の項目 4. 2 番目の項目 6. 3 番目の項目
UA およびホスト言語は、 UA スタイルシートおよび表示ヒントのスタイルマッピングで リスト項目のスタイルを設定するとき、 list-item カウンター値が デフォルトで ホスト言語のセマンティクスによって決定される基礎となる数値を反映するようにすべきです。 たとえば、付録 A: HTML 用サンプルスタイルシートを参照してください。
ol > li::marker { content: counters(list-item,'.') '.'; }
この規則を使用するネストされたリストは、次のようにレンダリングされます
1. 最初の最上位項目
5. 2 番目の最上位項目、value=5
5.3. 最初の第 2 レベル項目、リストの start=3
5.4. 2 番目の第 2 レベル項目、リストの start=3
5.4.4. 逆順リストの最初の第 3 レベル項目
5.4.3. 逆順リストの 2 番目の第 3 レベル項目
5.4.2. 逆順リストの 3 番目の第 3 レベル項目
5.4.1. 逆順リストの 4 番目の第 3 レベル項目
5.5. 3 番目の第 2 レベル項目、リストの start=3
6. 3 番目の最上位項目
次のようなマークアップが与えられた場合
<ol>
<li>最初の最上位項目
<li value=5>2 番目の最上位項目、value=5
<ol start=3>
<li>最初の第 2 レベル項目、リストの start=3
<li>2 番目の第 2 レベル項目、リストの start=3
<ol reversed>
<li>逆順リストの最初の第 3 レベル項目
<li>逆順リストの 2 番目の第 3 レベル項目
<li>逆順リストの 3 番目の第 3 レベル項目
<li>逆順リストの 4 番目の第 3 レベル項目
</ol>
</ol>
<li>3 番目の第 2 レベル項目、リストの start=3
<li>3 番目の最上位項目
</ol>
4.7. カウンターの出力: counter() および counters() 関数
カウンター自体には視覚的な効果はありませんが、 その値は counter() および counters() 関数で使用でき、 それらの使用値は、カウンター値を文字列または画像として表します。 これらは次のように定義されます:
<counter> = <counter()> | <counters()> counter() = counter( <counter-name>, <counter-style>? ) counters() = counters( <counter-name>, <string>, <counter-style>? )
ここで <counter-style> は、[css-counter-styles-3] で定義される、 名前付きカウンターの表現を生成するためのカウンタースタイルを指定し、
- counter()
- 要素の CSS カウンター集合内で <counter-name> という名前を持つ最内のカウンターの値を、 <counter-style> という名前のカウンター スタイルを使用して表します。
- counters()
- 要素の CSS カウンター集合内で <counter-name> という名前を持つすべてのカウンターの値を、 <counter-style> という名前のカウンター スタイルを使用して表し、 最外から最内の順に並べ、 指定された <string> で結合します。
どちらの場合も、 <counter-style> 引数が省略された場合、デフォルトは decimal になります。
counter() または counters() が使用される要素上に、 <counter-name> という名前のカウンターが存在しない場合、 まず開始値 0 でインスタンス化されます。
H1::before { content: counter(chno, upper-latin) ". " }
/* "A. 不満の歴史" のような見出しを生成する */
H2::before { content: counter(section, upper-roman) " - " }
/* "II - 不満の部" のような見出しを生成する */
BLOCKQUOTE::after { content: " [" counter(bq, decimal) "]" }
/* "... [3]" のように終わるブロック引用を生成する */
DIV.note::before { content: counter(notecntr, disc) " " }
/* 各 div.note の前に単純に箇条書き記号を生成する */
P::before { content: counter(p, none) }
/* 何も挿入しない */
< ul > < li > 1</ li > < li > 2< ul > < li > ネストされた 1</ li > < li > ネストされた 2</ li > </ ul > </ li > < li > 3</ li > </ ul > < style > li :: marker { content : '(' counters ( list-item , '.' ) ') ' ; } </ style >
上の文書は、次のようにレンダリングされるはずです:
(1) 1 (2) 2 (2.1) ネストされた 1 (2.2) ネストされた 2 (3) 3
< h1 > 最初の H1</ h1 > ...< h2 > H1 内の最初の H2</ h2 > ...< h2 > H1 内の 2 番目の H2</ h2 > ...< h3 > H2 内の最初の H3</ h3 > ...< h1 > 2 番目の H1</ h1 > ...< h2 > H1 内の最初の H2</ h2 > ...< style > body { counter-reset : h1 h2 h3 ; } h1 { counter-increment : h1 ; counter-reset : h2 h3 ;} h2 { counter-increment : h2 ; counter-reset : h3 ; } h3 { counter-increment : h3 ; } h1 :: before { content : counter( h1 , upper-alpha ) ' ' ; } h2 :: before { content : counter( h1 , upper-alpha ) '.' counter( h2 , decimal ) ' ' ; } h3 :: before { content : counter( h1 , upper-alpha ) '.' counter( h2 , decimal ) '.' counter( h3 , lower-roman ) ' ' ; } </ style >
上の文書は、次のようにレンダリングされるはずです:
A 最初の H1 ... A.1 H1 内の最初の H2 ... A.2 H1 内の 2 番目の H2 ... A.2.i H2 内の最初の H3 ... B 2 番目の H1 ... B.1 H1 内の最初の H2 ...
他のユースケースには、互いにわずかに異なることを意図した transform を持つ ネストされた要素や兄弟要素があります。 現在、これを適切な方法で行うにはプリプロセッサーを使用する必要がありますが、 カウンターがあれば「素の」CSS でもうまく機能します。
（ネストされた場合については現在でも、 カスタムプロパティを使用し、ネストされた calc() を積み重ねることで、 連続する値を構築できますが、 これは *少し* 扱いにくく、 兄弟には機能しません。）
提案は、counter-value(<counter-name>) 関数を追加し、 文字列を返す代わりに、名前付きカウンターの値を整数として返すようにすることです。
Issue 1026 を参照してください。
付録 A: HTML 用サンプルスタイルシート
この節は参考情報であり、規範的ではありません。 [HTML] の レンダリング章では、 HTML リストに適用される規範的なデフォルトプロパティを定義しています。 このサンプルスタイルシートは、馴染みのあるマークアップ規約を使用して CSS の機能を示すために提供されています。
CSS で
ol[reversed] のリスト番号付けをサポートする方法については議論が続いています。
たとえば、Issue 4181 を参照してください。
/* リスト項目を設定する */
li {
display: list-item; /* 'counter-increment: list-item' を意味する */
}
/* list-item カウンターのスコープを定めるよう ol と ul を設定する */
ol, ul {
counter-reset: list-item;
}
/* リストのデフォルトのリストスタイル型 */
ol { list-style-type: decimal; }
ul { list-style-type: toggle(disc, circle, square); }
/* ol 要素および ul 要素の type 属性 */
ul[type="disc"] { list-style-type: disc; }
ul[type="circle"] { list-style-type: circle; }
ul[type="square"] { list-style-type: square; }
ol[type="1"] { list-style-type: decimal; }
ol[type="a"] { list-style-type: lower-alpha; }
ol[type="A"] { list-style-type: upper-alpha; }
ol[type="i"] { list-style-type: lower-roman; }
ol[type="I"] { list-style-type: upper-roman; }
/* ol 要素の start 属性 */
ol[start] {
counter-reset: list-item calc(attr(start integer, 1) - 1);
}
/* li 要素の value 属性 */
li[value] {
counter-set: list-item attr(value integer, 1);
}
/* ボックスモデルの規則 */
ol, ul {
display: block;
margin-block: 1em;
marker-side: match-parent;
padding-inline-start: 40px;
}
ol ol, ol ul, ul ul, ul ol {
margin-block: 0;
}
li {
text-align: match-parent;
}
謝辞
この仕様は、以下の方々からの意見によって実現しました: Aharon Lanin, Arron Eicholz, Brad Kemper, David Baron, Emilio Cobos Álvarez, Mats Palmgren, Oriol Brufau, Simon Sapin, Xidorn Quan
変更点
この節では、以前の公開版以降の変更点を記録します。
2020年7月9日付 WD 以降の変更点
- ::marker ボックス自体に適用されるプロパティと、 ::marker ボックスの内容に適用されるプロパティを明確化しました。 （Issue 4568）
- UA の ::marker 用デフォルトスタイルシートに text-transform: none を追加しました。 （Issue 4206）
- カウンターの継承を、まず親から取得し、 新しいカウンターである場合にのみ兄弟から取得するよう変更しました。 （Issue 5477）
2019年8月17日付 WD 以降の変更点
- outside リストマーカーがブロック コンテナーであることを指定しました。 （その外部表示型は未定義のままです。）
- ::marker に適用されるプロパティの一覧を [CSS-PSEUDO-4] から取り込み、アニメーション、トランジション、および white-space を追加しました。
- UA の ::marker 用デフォルトスタイルシートに white-space: pre を追加しました。 （Issue 4448） ただし、マーカーボックスにおける正確な空白処理の動作については、 依然として検討中であることに注意してください。
2019年4月25日付 WD 以降の変更点
- 精度、編集上の明確さ、および CSS2 との同期を向上させるため、§ 4 カウンターによる自動番号付けの節を 書き直しました。
2014年3月20日付 WD 以降の変更点
- カウンター名について、一貫して <custom-ident> を使用するようにしました。
- position: marker を削除しました（CSS2 と同様に、マーカーの配置は現在ほとんど未定義です）。
- マーカーに関する章を全面的に書き直して簡潔化し、 現在の期待される動作に合わせ、編集上の改善を行いました。
- list-item カウンターの定義を 独立した節に移し、例を追加し、いくつかの点を明確化しました。
- marker-side の値を、ボックス／テキスト配置の規約に合わせて改名しました。
- counter-set が counter-increment の前ではなく後に適用されることを定義しました。 （Issue 3810）
- <'list-style-type'> を最後に置くよう、list-style のシリアル化の正規順序を 確立しました。 （Issue 2624）
CSS レベル 2 からの変更点
はじめにの節で説明したように、 CSS2.1 と比較すると、このモジュールには重要な変更があります。
- リストマーカーを直接スタイル設定できるようにするため、::marker 疑似要素が導入されました。
- list-style-type は現在、<string> に加えて、<counter-style> の拡張値を [css-counter-styles-3] から受け入れます。.
- 定義済みカウンター識別子 list-item が 導入されました。
- counter-set プロパティが追加されました。
- [CSS-DISPLAY-3] で導入された、インラインレベルのリスト項目を許可しました。