1. はじめに
この仕様は::marker疑似要素、 マーカーを生成するlist-item display型、 そしてマーカーの配置やスタイリングを制御するいくつかのプロパティを定義します。
また、特別な数値オブジェクトであるカウンターを定義します。 これはマーカーのデフォルト内容の生成によく使われます。
< style > li :: marker { content : "(" counter( list-item , lower-roman ) ")" ; } li { display : list-item ; } </ style > < ol > < li > This is the first item.< li > This is the second item.< li > This is the third item.</ ol >
このような表示になります：
(i) This is the first item. (ii) This is the second item. (iii) This is the third item.
注: この例はHTMLで通常必要となるよりもかなり冗長ですが、 必要なスタイリングのほとんどはUAのデフォルトスタイルシートで処理されます。
子孫セレクターや子セレクターを使うことで、埋め込みリストの深さに応じて異なるマーカータイプを指定できます。
1.1. 値の定義
この仕様はCSSプロパティ定義の慣例（[CSS2]）を、 値定義構文（[CSS-VALUES-3]）で採用しています。 この仕様で定義されていない値型はCSS Values & Units [CSS-VALUES-3]で定義されています。 他のCSSモジュールと組み合わせることで、これらの値型の定義が拡張される場合があります。
定義に記載されているプロパティ固有の値に加え、 この仕様で定義される全てのプロパティは CSS全体キーワードも値として受け付けます。 可読性のため、ここでは明示して繰り返していません。
2. リスト項目の宣言
リスト項目とは、 display プロパティがlist-itemに設定されている要素です。リスト項目は::marker疑似要素を生成します。 他の要素は生成しません。 さらに、リスト項目は暗黙のlist-item カウンターを自動的にインクリメントします（§ 4.6 暗黙のlist-itemカウンター参照）。
3. マーカー
リスト項目 display型の定義的特徴は、マーカーです。 これはリスト内の各リスト項目の先頭を示す記号や序数です。 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 : "Note " counter( note - counter ) ":" ; } </ style > < p > This is the first paragraph in this document.< p class = "note" > This is a very short document.< p > This is the end.
次のように表示されます：
This is the first paragraph
in this document.
Note 1: This is a very short
document.
This is the end.
< style > p { margin-left : 8 em } /* カウンター用のスペース */ li { list-style-type : lower-roman ; } li :: marker { color : blue ; font-weight : bold ; } </ style > < p > This is a long preceding paragraph ...< ol > < li > This is the first item.< li > This is the second item.< li > This is the third item.</ ol > < p > This is a long following paragraph ...
この文書は次のように表示されます：
This is a long preceding
paragraph ...
i. This is the first item.
ii. This is the second item.
iii. This is the third item.
This is a long following
paragraph ...
以前はマーカーをスタイリングする唯一の方法は継承を利用することでした。 望むマーカースタイリングをリスト項目に設定し、 実際のリスト項目内容のラッパー要素でそれを解除する必要がありました。
マーカーボックスはリスト項目にのみ存在します。 他の要素では、 ::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]参照）
今後の仕様でこのプロパティリストが拡張されることが期待されますが、 現時点ではマーカーボックスの外部レイアウトは完全に定義されていないため、 これらのプロパティだけが許可されています。
その他のプロパティは、マーカーボックスに対して作者起源で設定しても効果を持つべきではありません。 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]）はこれらのマーカーを選択しません。 起点要素が疑似要素である場合は、 セレクターで明示的に指定する必要があります（例：::before::marker）。
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が起点要素に指定され、マーカー画像を定義している場合
- 'マーカーボックスには、 指定されたマーカー画像を表す 匿名 インライン 置換要素が入り、 その後に1つのスペース（U+0020 SPACE）からなるテキストランが続きます。
- list-style-typeが起点要素に指定され、マーカー文字列を定義している場合
- マーカーボックスには、指定されたマーカー文字列からなるテキストランが入ります。
- その他
- マーカーボックスには内容がなく、::markerはボックスを生成しません。
加えて、UAは保持された強制改行をスペースに変換したり、破棄したりすることがあります。
3.3. 画像マーカー： list-style-image プロパティ
| Name: | list-style-image |
|---|---|
| Value: | <image> | none |
| Initial: | none |
| Applies to: | リスト項目 |
| Inherited: | yes |
| Percentages: | n/a |
| Computed value: | キーワードnoneまたは計算された<image> |
| Canonical order: | 文法順 |
| Animation type: | 離散的 |
マーカー画像を指定します。 これは、リスト項目のマーカーのcontentがnormalの場合に使用されます。 値は以下の通りです：
- <image>
- <image>が有効な画像を表している場合、 要素のマーカー画像として<image>を指定します。 そうでない場合、 要素にはマーカー画像がありません。
- none
- 要素にはマーカー画像がありません。
li{ list-style-image : url ( "http://www.example.com/ellipse.png" ) }
3.4. テキストベースのマーカー： list-style-type プロパティ
| Name: | list-style-type |
|---|---|
| Value: | <counter-style> | <string> | none |
| Initial: | disc |
| Applies to: | リスト項目 |
| Inherited: | yes |
| Percentages: | n/a |
| Computed value: | 指定値 |
| Canonical order: | 文法順 |
| Animation type: | 離散的 |
マーカー文字列を指定します。 これは、リスト項目のマーカーのcontent値がnormalで、マーカー画像がない場合に使用されます。 値は以下の通りです：
- <counter-style>
-
要素のマーカー文字列を、指定されたlist-itemカウンター値を
指定された<counter-style>で表現した値にします。
具体的には、 マーカー文字列は、カウンター表現生成の結果であり、 指定されたlist-itemカウンター値を 指定された<counter-style>で生成し、 prefix（<counter-style>の接頭辞）で始まり、 suffix（<counter-style>の接尾辞）で終わります。 指定された<counter-style>が存在しない場合は、decimalが使用されます。
- <string>
- 要素のマーカー文字列は、指定された<string>です。
- none
- 要素にはマーカー文字列がありません。
ul{ list-style-type : "★" ; } /* マーカーを「星」文字に設定 */ p.note{ display : list-item; list-style-type : "Note: " ; list-style-position : inside; } /* 注記段落に「Note: 」という文字列のマーカーを付与 */ 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 プロパティ
| Name: | list-style-position |
|---|---|
| Value: | inside | outside |
| Initial: | outside |
| Applies to: | リスト項目 |
| Inherited: | yes |
| Percentages: | n/a |
| Computed value: | キーワード（ただし本文参照） |
| Canonical order: | 文法順 |
| Animation type: | 離散的 |
このプロパティは::markerがインラインで描画されるか、 またはリスト項目のすぐ外側に配置されるかを指定します。 値は以下の通りです：
- inside
- 特別な効果はありません。 (::markerはリスト項目内容の先頭にあるインライン要素です。)
- outside
-
リスト項目がブロックコンテナの場合：
マーカーボックスはブロックコンテナとなり、主ブロックボックスの外側に配置されます。
ただし、list-itemマーカーのフロートに隣接する位置は未定義です。
CSSはマーカーボックスの正確な位置や描画順を明確に規定しませんが、
ボックスのinline-start側に、
writing-modeで指定されたボックスの書字モードを用いて配置することを要求します。
マーカーボックスは主ブロックボックスのボーダーに固定され、主ボックスの内容と一緒にスクロールしません。
UAは、要素のoverflowがvisible以外の場合、マーカーを非表示にすることがあります。
(この許可は将来的に変更される可能性があります)
マーカーボックスのサイズや内容は、主ブロックボックスの高さやその最初のラインボックスの高さに影響を与えたり、
場合によっては新しいラインボックスの生成を引き起こすことがあります。
この相互作用も未定義です。
リスト項目がインラインボックスの場合： この値はinsideと同等です。
あるいは、outsideはマーカーを主インラインボックスの直前の兄弟要素としてレイアウトすることもできます。
<style>
ul.compact { list-style: inside; }
ul { list-style: outside; }
</style>
<ul class=compact>
<li>first "inside" list item comes first</li>
<li>second "inside" list item comes first</li>
</ul>
<hr>
<ul>
<li>first "outside" list item comes first</li>
<li>second "outside" list item comes first</li>
</ul>
上記の例は次のように整形される可能性があります：
* first "inside" list item comes first * second "inside" list item comes second ======================== * first "outside" list item comes first * second "outside" list item comes second
3.6. マーカーのスタイリング： list-style ショートハンドプロパティ
| Name: | 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値は、ショートハンドで他に設定されていない方のプロパティに適用されなければなりません。
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 ); /* 構文エラー */
注: <counter-style> 型のlist-style-type値でも文法上の曖昧さが生じます。 これらの値は最終的に<custom-ident>値であるため、 [CSS-VALUES-3]の構文解析ルールが適用されます。
li
HTML）に直接指定することもできますが、
注意して行うべきです。
次のようなルールを考えてみましょう：
ol.alpha li{ list-style : lower-alpha; } ul li{ list-style : disc; }
上記の方法では期待通りに動作しません。
もしulをol class=alphaの中にネストすると、
最初のルールの詳細度によって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 プロパティ
| Name: | marker-side |
|---|---|
| 値: | match-self | match-parent |
| 初期値: | match-self |
| 適用対象: | リスト項目 |
| 継承: | yes |
| パーセンテージ: | n/a |
| 算出値: | 指定キーワード |
| 規範順序: | 文法順 |
| アニメーション型: | 離散的 |
marker-sideプロパティは、 outsideのマーカーボックスが リスト項目自身（すなわち起点要素）の方向性で配置されるか、 リストコンテナ（つまり起点要素の親）の方向性で配置されるかを指定します。 前者の場合、リスト内の各項目ごとに方向性で位置が異なることがあります。 後者の場合はリスト全体に割り当てられた方向性に従ってすべて同じ側に揃います。
- match-self
- マーカーボックスは、 ::markerの起点要素の方向性で配置されます。
- match-parent
- マーカーボックスは、 ::markerの起点要素の親要素の方向性で配置されます。
以下の2つのレンダリング例は、次のHTMLから生成されます。違いはリスト上のmarker-side値のみです：
< ul > < li > english one< li dir = rtl > OWT WERBEH< li > english three< li dir = rtl > RUOF WERBEH</ ul >
| match-self | match-parent |
|---|---|
* english one
OWT WERBEH *
* english three
RUOF WERBEH *
|
* english one * OWT WERBEH * english three * RUOF WERBEH |
この順序でマーカー内の句読点を正しく配置するには、 親のdirection値も考慮する必要があります。 <https://github.com/w3c/csswg-drafts/issues/4202>
キーワードの名称変更や キーワードのリネーム、 list-style-positionとの統合 に関する課題がオープンです。
4. カウンターによる自動番号付け
カウンターは、 CSSでリスト項目を自動的に番号付けするなどの用途で使われる特別な数値トラッカーです。 すべての要素は0個以上のカウンターを持っており、 文書ツリー内でプロパティ値の継承と同様の方法で継承されます。カウンターには、 カウンターを識別するnameと creator、 そして整数のvalueがあります。 これらは カウンタープロパティ（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 |
| 適用対象: | すべての要素 |
| 継承: | no |
| パーセンテージ: | n/a |
| 算出値: | キーワード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 |
| 適用対象: | すべての要素 |
| 継承: | no |
| パーセンテージ: | n/a |
| 算出値: | キーワードnoneまたは、各項目が識別子と整数のペアとなるリスト |
| 規範順序: | 文法順 |
| アニメーション型: | 算出値型による |
ユーザーエージェントは、非視覚メディアを含む全てのメディアでこのプロパティをサポートすることが期待されています。
| 名前: | counter-set |
|---|---|
| 値: | [ <counter-name> <integer>? ]+ | none |
| 初期値: | none |
| 適用対象: | すべての要素 |
| 継承: | no |
| パーセンテージ: | n/a |
| 算出値: | キーワードnoneまたは、各項目が識別子と整数のペアとなるリスト |
| 規範順序: | 文法順 |
| アニメーション型: | 算出値型による |
ユーザーエージェントは、非視覚メディアを含む全てのメディアでこのプロパティをサポートすることが期待されています。
counter-incrementおよびcounter-set プロパティは 既存のカウンターの値を操作します。 これらは、要素上にまだ同名のカウンターが存在しない場合のみ新しいカウンターをインスタンス化します。 それぞれの値は次の通りです：
- none
- この要素はどのカウンターの値も変更しません。
- <counter-name> <integer>?
-
（counter-setの場合は値を設定、
counter-incrementの場合は値を加算）
要素上の指定されたカウンターの値を、指定された<integer>に設定／加算します。
<integer>が省略された場合、
1（counter-incrementの場合）、
0（counter-setの場合）がデフォルトです。
要素上に同名のカウンターが現時点で存在しない場合、 0で新しいカウンターをインスタンス化してから値を設定／加算します。
この例は「Chapter 1」「1.1」「1.2」などのように章や節に番号を付ける方法を示します。
h1 : :before{ content : "Chapter " 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のすべての子がそのカウンターを参照します。
n番目のitemカウンターを itemnと表すと、 以下のHTML断片は示されたカウンターを利用します。
<ol> item0が作成され、0に設定される
<li> item0が1に加算される<li> item0が2に加算される
<ol> item1が作成され、item0の内側に0でネストされる
<li> item1が1に加算される<li> item1が2に加算される<li> item1が3に加算される
<ol> item2が作成され、item1の内側に0でネストされる
<li> item2が1に加算される</ol>
<li> item1が4に加算される
<ol> item3が作成され、item1の内側に0でネストされる
<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 counters（element自身のCSSカウンター集合を表す）を 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要素も同様です。 exampleカウンターを#fooから継承し、 値1も継承して2にインクリメントします。
しかし、#baz要素は少し異なります。 exampleカウンターを直前兄弟の#fooから継承します。 しかし値は#fooの1ではなく、 ツリー順で直前要素の#barの2を継承します。
この挙動により、文書全体で単一のカウンターを使い続け、ネスト構造を意識せずに連続的インクリメントが可能になります。
注: 通常のCSS継承と同じく、 カウンター継承は[DOM]の「フラット化要素ツリー」上で動作します。
4.4.2. カウンターのインスタンス化
-
countersをelementのCSSカウンター集合とする。
-
最後のname名のカウンターをcountersから探し、innermost counterとする。 もしinnermost counterの起源要素がelementまたはelementの直前兄弟なら、 countersからinnermost counterを削除する。
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ずつインクリメントされなければなりません （つまりリスト項目がlist-item 1を counter-increment値の末尾に追加した場合と同じ挙動、必要なら新しいカウンターのインスタンス化も含む）。 これは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. First Item 4. Second Item 6. Third Item
UAやホスト言語は UAスタイルシートや表示ヒントスタイルマッピングで list-itemカウンター値が デフォルトでホスト言語のセマンティクスに従った数値となるようにすべきです。 詳細は付録A：HTML用サンプルスタイルシート参照。
ol > li::marker { content: counters(list-item,'.') '.'; }
このルールでネストしたリストは次のように描画されます：
1. First top-level item
5. Second top-level item, value=5
5.3. First second-level item, list start=3
5.4. Second second-level item, list start=3
5.4.4. First third-level item in reversed list
5.4.3. Second third-level item in reversed list
5.4.2. Third third-level item in reversed list
5.4.1. Fourth third-level item in reversed list
5.5. Third second-level item, list start=3
6. Third top-level item
以下のようなマークアップを与えた場合：
<ol>
<li>First top-level item
<li value=5>Second top-level item, value=5
<ol start=3>
<li>First second-level item, list start=3
<li>Second second-level item, list start=3
<ol reversed>
<li>First third-level item in reversed list
<li>Second third-level item in reversed list
<li>Third third-level item in reversed list
<li>Fourth third-level item in reversed list
</ol>
</ol>
<li>Third second-level item, list start=3
<li>Third top-level item
</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-style>で表現します。
- counters()
- 要素のCSSカウンター集合内で指定された名前のカウンター値すべてを、 指定されたカウンタースタイルを用いて <counter-style>で表現し、 外側から内側順に並べて指定した<string>で結合します。
どちらの場合も、 <counter-style> 引数が省略された場合はdecimalがデフォルトです。
要素上に指定名のカウンターが存在しない場合、 counter()やcounters()を使う際は、 まず初期値0でインスタンス化されます。
H1::before { content: counter(chno, upper-latin) ". " }
/* "A. A History of Discontent" のような見出しを生成 */
H2::before { content: counter(section, upper-roman) " - " }
/* "II - The Discontent Part" のような見出しを生成 */
BLOCKQUOTE::after { content: " [" counter(bq, decimal) "]" }
/* "... [3]" のような引用部分を生成 */
DIV.note::before { content: counter(notecntr, disc) " " }
/* div.note の前に単純に丸印を生成 */
P::before { content: counter(p, none) }
/* 何も挿入されない */
< ul > < li > one</ li > < li > two< ul > < li > nested one</ li > < li > nested two</ li > </ ul > </ li > < li > three</ li > </ ul > < style > li :: marker { content : '(' counters ( list-item , '.' ) ') ' ; } </ style >
この文書の表示例：
(1) one (2) two (2.1) nested one (2.2) nested two (3) three
< h1 > First H1</ h1 > ...< h2 > First H2 in H1</ h2 > ...< h2 > Second H2 in H1</ h2 > ...< h3 > First H3 in H2</ h3 > ...< h1 > Second H1</ h1 > ...< h2 > First H2 in H1</ 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 First H1 ... A.1 First H2 in H1 ... A.2 Second H2 in H1 ... A.2.i First H3 in H2 ... B Second H1 ... B.1 First H2 in H1 ...
他のユースケースとしては、入れ子や兄弟要素に対して異なるtransform値を少しずつずらして使いたい場合などがあります。 現状はプリプロセッサを使うしかありませんが、カウンターがあれば「素の」CSSでもうまく動作します。
（入れ子の場合はカスタムプロパティとcalc()を重ねて順次値を作ることもできますが、 兄弟には使えませんし少し煩雑です。）
提案：counter-value(<counter-name>) 関数を追加し、これはカウンターの値を整数として返すようにします（文字列ではなく）。
Issue 1026を参照。
付録A：HTML用サンプルスタイルシート
このセクションは参考用であり、規範的ではありません。 [HTML]のRendering章が HTMLリストに適用される規範的なデフォルトプロパティを定義しています。 このサンプルスタイルシートはCSSの機能を なじみのあるマークアップ慣例で示すためのものです。
CSSでol[reversed]リスト番号付けをどうサポートするか議論中です。
Issue 4181参照。
/* リスト項目のセットアップ */
li {
display: list-item; /* 'counter-increment: list-item' を暗黙的に含む */
}
/* ol, ulでlist-itemカウンターのスコープを設定 */
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)
- text-transform: noneをUAのデフォルトスタイルシートの::markerに追加しました。 (Issue 4206)
- カウンターの継承はまず親から取得し、兄弟からは新しいカウンターの場合のみ取得するように変更しました。 (Issue 5477)
2019年8月17日WD以降の変更
- outsideリストマーカーがブロックコンテナであることを明示しました。 （外部display型は未定義のままです。）
- ::markerに適用されるプロパティ一覧を[CSS-PSEUDO-4]から引用し、アニメーション、トランジション、white-spaceを追加しました。
- UAのデフォルトスタイルシートでwhite-space: preを::markerに追加しました。 (Issue 4448) ただし、マーカーボックスの空白処理の正確な挙動はまだ検討中です。
2019年4月25日WD以降の変更
- § 4 カウンターによる自動番号付けの章をより正確かつ編集的に明確化し、CSS2との同期をはかるため全面的に書き直しました。
2014年3月20日WD以降の変更
- カウンター名に常に<custom-ident>を使用するように統一しました。
- position: markerの記述を削除しました（マーカーの配置はCSS2同様ほぼ未定義です）。
- マーカーに関する章を全面的に書き直し、最新の期待値に合わせ編集品質を向上させました。
- list-itemカウンターの定義を独立したセクションとし、例や明確化を追加しました。
- marker-sideの値をボックス/テキスト整列の慣例に合わせて名称変更しました。
- counter-setはcounter-incrementの後に適用されるように定義しました。 (Issue 3810)
- list-styleのシリアライズ規範順を<'list-style-type'>を最後にするようにしました。 (Issue 2624)
CSS Level 2からの変更点
はじめにの章に記載の通り、このモジュールはCSS2.1と比べて重要な変更を含みます。
- ::marker疑似要素が導入され、リストマーカーを直接スタイリングできるようになりました。
- list-style-typeは、<string>および<counter-style>の拡張値を受け付けるようになりました。
- list-itemの事前定義カウンター識別子が導入されました。
- counter-setプロパティが追加されました。
- インラインレベルのリスト項目も許可されるようになりました（[CSS-DISPLAY-3]参照）。