CSS Lists and Counters Module Level 3

3.1. `marker^pe 疑似要素

`~marker~box$は、 `~list~item$の `marker$pe 疑似要素により，`~list~item$の最初の子として生成される — 要素~上に `before$pe 疑似要素も存在するならば，その前に。 それは、 `§ ~marker内容の生成-法＠#content-property$ にて定義されるように内容で埋められる。 ◎ The marker box is generated by the ::marker pseudo-element of a list item as the list item’s first child, before the ::before pseudo-element (if it exists on the element). It is filled with content as defined in § 3.2 Generating Marker Contents.

<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>これは文書~内の最初の段落。
<p class="note">これはとても短い段落。
<p>ここが末尾。

          これは文書~内の最初の段落。

Note 1:   これはとても短い段落。

          ここが末尾。

<style>
p { margin-left: 8em } /* 
~counter用に空間を作る
◎
Make space for counters
 */
li { list-style-type: lower-roman; }
li::marker { color: blue; font-weight:bold; }
</style>
<p>これは先行する長い段落 ...
<ol>
  <li>これは一個目の~item
  <li>これは二個目の~item
  <li>これは三個目の~item
</ol>
<p>これは後続する長い段落 ...

       これは先行する長い段落 ...

  i.   これは一個目の~item
 ii.   これは二個目の~item
iii.   これは三個目の~item

       これは後続する長い段落 ...

`~marker$は、 `~list~item$用に限り存在する。 他の要素~上では、 `marker$pe 疑似要素の `content$p ~propは `none$v2 に算出されるモノトスル — それは、 ~markerの作成を抑止する。 ◎ Marker boxes only exist for list items: on any other element, the ::marker pseudo-element’s content property must compute to none, which suppresses its creation.

::marker, ::before::marker, ::after::marker {
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  white-space: pre;
  text-transform: none;
}

3.2. ~marker内容の生成-法

`~marker~box$の内容は、 次に挙げる条件のうち最初に満たされるものにより決定される： ◎ The contents of a marker box are determined by the first of these conditions that is true:

`marker$pe 自身の `content$p は `normal$v2 でない場合： ◎ content on the ::marker itself is not normal

内容は — `before$pe に対するとき正確に同じに — `content$p ~propに定義されるように決定される。 ◎ The contents of the marker box are determined as defined by the content property, exactly as for ::before.

`出自の要素$の `list-style-image$p が`~marker画像$を定義する場合： ◎ list-style-image on the originating element defines a marker image

内容は、 次の順の並びからなる：

• 指定された`~marker画像$を表現している，`匿名$かつ`行内$の`置換され$る要素
• 1 個の~space（ U+0020 SPACE ）のみからなる`~text連列$

◎ The marker box contains an anonymous inline replaced element representing the specified marker image, followed by a text sequence consisting of a single space (U+0020 SPACE).

`出自の要素$の `list-style-type$p が`~marker文字列$を定義する場合： ◎ list-style-type on the originating element defines a marker string

内容は、 指定された`~marker文字列$からなる`~text連列$になる。 ◎ The marker box contains a text sequence consisting of the specified marker string.

他の場合： ◎ otherwise

内容は無い — `marker$pe は~boxを生成しない。 ◎ The marker box has no contents and ::marker does not generate a box.

加えて，~UAは、 保全された`強制d行l分断$があれば を~spaceに変形するか破棄してもヨイ。 ◎ Additionally, the UA may transform into spaces or discard any preserved forced line breaks.

3.3. 画像~marker： `list-style-image^p ~prop

`~marker画像@ を指定する。 それは、 `~list~item$の`~marker$を埋めるときに — ~list~itemの `content$p が `normal$v2 のときに限り — 利用される。 各種 値は、 次に従う： ◎ Specifies the marker image, which is used to fill the list item’s marker when its content is normal. The values are as follows:

`image$t

`image$t が`妥当な画像$を表現する場合、 それが要素の`~marker画像$を指定する。 他の場合、 要素には`~marker画像$は無い。 ◎ If the <image> represents a valid image, specifies the element’s marker image as the <image>. Otherwise, the element has no marker image.

`none@v

要素には`~marker画像$は無い。 ◎ The element has no marker image.

`~marker画像$は、 `既定の~sizing~algo$ `css-images-3$r を利用して~sizeされる — `指定d~size$は無し【拘束されない】, `既定の~obj~size$には `1em^v 平方を与える下で。 ◎ The marker image is sized using the default sizing algorithm [css-images-3] with no specified size and a default object size of 1em square.

li { list-style-image: url("http://www.example.com/ellipse.png") }

3.4. ~textに基づく~marker： `list-style-type^p ~prop

`~marker文字列@ を指定する。 それは、 `~list~item$の`~marker$を埋めるときに — ~list~itemの `content$p が `normal$v2 , かつ`~marker画像$は無いときに限り — 利用される。 各種 値は、 次に従う： ◎ Specifies the marker string, which is used to fill the list item’s marker when its content value is normal and there is no marker image. The values are as follows:

`counter-style$t

要素の`~marker文字列$を［ 指定された `counter-style$t を利用して表現される `list-item$v ~counterの値 ］として指定する ◎ Specifies the element’s marker string as the value of the list-item counter represented using the specified <counter-style>.

特定的には，`~marker文字列$は、［ 指定された `counter-style$t を利用して `list-item$v ~counter値~用の`~counter表現を生成-$した結果 ］の先頭に `counter-style$t の `prefix$d を, 末尾に `counter-style$t の `suffix$d を付け加えたものになる。 指定された `counter-style$t が存在しない場合、 `decimal$v と見做される。 ◎ Specifically, the marker string is the result of generating a counter representation of the list-item counter value using the specified <counter-style>, prefixed by the prefix of the <counter-style>, and followed by the suffix of the <counter-style>. If the specified <counter-style> does not exist, decimal is assumed.

`string$t

要素の`~marker文字列$は、 指定された `string$t になる。 ◎ The element’s marker string is the specified <string>.

`none@v

要素には`~marker文字列$は無い。 ◎ The element has no marker string.

ul { list-style-type: "★"; }
/* 
~markerを “星印” に設定する
◎
Sets the marker to a "star" character
 */

p.note {
  display: list-item;
  list-style-type: "注記：";
  list-style-position: inside;
}
/* 
注記~段落に，文字列 "注記：" による~markerを与える
◎
Gives note paragraphs a marker consisting of the string "Note: "
 */

ol { list-style-type: upper-roman; }
/* 
すべての有順序~listは、
`~counter~style$として `upper-roman$v を利用するよう設定する
`CSS-COUNTER-STYLES-3$r
◎
Sets all ordered lists to use the upper-roman counter-style (defined in the Counter Styles specification [[CSS-COUNTER-STYLES]])
 */

ul { list-style-type: symbols(cyclic '○' '●'); }
/* 
すべての無順序~list~itemの~markerに［
~~中空の丸, ベタの丸
］を交替的に設定する。
◎
Sets all unordered list items to alternate between empty and filled circles for their markers.
 */

ul { list-style-type: none; }
/* 
~markerをまるごと抑止する
— `list-style-image^p に`妥当な画像$が指定されていない限り。
◎
Suppresses the marker entirely, unless list-style-image is specified with a valid image.
 */

3.5. ~markerの位置決め： `list-style-position^p ~prop

この~propは、［ `marker$pe を行内に描画するか，`~list~item$のすぐ外側に位置するか ］を規定する。 各種 値は、 次に従う： ◎ This property dictates whether the ::marker is rendered inline, or positioned just outside of the list item. The values are as follows:

`inside@v

特別な効果は無い （ `marker$pe は、 `~list~item$の内容の始端にある行内~要素になる）。 ◎ No special effect. (The ::marker is an inline element at the start of the list item’s contents.)

`outside@v

`~list~item$は`塊~容器$である場合： ~marker~boxは、 `塊~容器$になり，`塊~box$を成す`首要~box$の外側に置かれる。 しかしながら，浮動体に隣接する~list~item~markerの位置は、 定義されない。 ~CSSは、 ~marker~boxの［ 精確な所在 ／ 塗ng順序 ］は指定しないが、［［ `marker-side$p が指示する~box ］の`書字~mode$を利用して，~boxの`行内~始端$側に配置する ］ことを要求する。 ~marker~boxは、 `首要~box$の~borderに固定され，首要~boxの内容ともに~scrollすることはない。 ~UAは、 当の要素の `overflow$p が `visible$v 以外ならば，~markerを隠してもヨイ （この許容は、 将来に変更され得る）。 ~marker~boxの~sizeや内容は、［ `首要~box$や その最初の`行l~box$ ］の縦幅に影響したり，一部の事例では新たな行l~boxを作成させることもある — この相互作用もまた、 定義されない。 ◎ If the list item is a block container: the marker box is a block container and is placed outside the principal block box; however, the position of the list-item marker adjacent to floats is undefined. CSS does not specify the precise location of the marker box or its position in the painting order, but does require that it be placed on the inline-start side of the box, using the writing mode of the box indicated by marker-side. The marker box is fixed with respect to the principal block box’s border and does not scroll with the principal box’s content. A UA may hide the marker if the element’s overflow is other than visible. (This allowance may change in the future.) The size or contents of the marker box may affect the height of the principal block box and/or the height of its first line box, and in some cases may cause the creation of a new line box; this interaction is also not defined.

これは，~CSS-2をうのみに書き写しただけであり、 真の定義が必要である。 ◎ This is handwavey nonsense from CSS2, and needs a real definition.

`~list~item$は`行内~box$である場合： この値は `inside$v と等価になる。 ◎ If the list item is an inline box: this value is equivalent to inside.

別法として、 ~markerを，行内~boxを成す首要~boxの前にある同胞として~lay-outする~~案もある。 ◎ Alternatively, outside could lay out the marker as a previous sibling of the principal inline box.

<style>
  ul.compact { list-style: inside; }
  ul         { list-style: outside; }
</style>
<ul class=compact>
  <li>一個目の "inside" ~list~item
  <li>二個目の "inside" ~list~item
</ul>
<hr>
<ul>
  <li>一個目の "outside" ~list~item
  <li>二個目の "outside" ~list~item
</ul>

  * 一個目の "inside" ~list~item
  * 二個目の "inside" ~list~item

========================

* 一個目の "outside" ~list~item
* 二個目の "outside" ~list~item

3.6. ~markerの~style付け： `list-style^p 略式~prop

`list-style$p ~propは、 3 種の~prop［ `list-style-type$p, `list-style-image$p, `list-style-position$p ］を~stylesheetの同じ箇所でまとめて設定する略式である。 ◎ The list-style property is a shorthand notation for setting the three properties list-style-type, list-style-image, and list-style-position at the same place in the style sheet.

UL { list-style: upper-roman inside }  /* 
すべての `UL^e
◎
Any UL
 */
UL UL { list-style: circle outside } /* 
`UL^e の子孫である，すべての `UL^e
◎
Any UL child of a UL
 */

略式における値 `none^v の利用は、 多義的にもなり得る — `none^v は、 `list-style-image$p, `list-style-type$p どちらにも妥当な値なので。 この多義性を解決するため、 略式における値 `none^v は，［ 2 つの~propのうち，この略式で `none^v 以外が設定されていない方の~prop ］に適用するモノトスル。 ◎ Using a value of none in the shorthand is potentially ambiguous, as none is a valid value for both list-style-image and list-style-type. To resolve this ambiguity, a value of none in the shorthand must be applied to whichever of the two properties aren’t otherwise set by the shorthand.

list-style: none disc;
/* 
画像を `none^v, 型を `disc^v に設定する。
◎
Sets the image to "none" and the type to "disc".
 */

list-style: none url(bullet.png);
/* 
画像を `url(bullet.png)^v, 型を `none^v に設定する。
◎
Sets the image to "url(bullet.png)" and the type to "none".
 */

list-style: none;
/* 
画像, 型の両方とも `none^v に設定する。
◎
Sets both image and type to "none".
 */

list-style: none disc url(bullet.png);
/* 
構文~error
◎
Syntax error
 */

注記： `list-style-type$p の `counter-style$t 値は、 文法~上の多義性をもたらし得る。 それは `custom-ident$t を含んでおり， `CSS-VALUES-3$r による構文解析~規則が適用されるので。 ◎ Note: The <counter-style> values of list-style-type can also create grammatical ambiguities. As such values are ultimately <custom-ident> values, the parsing rules in [CSS-VALUES-3] apply.

ol.alpha li { list-style: lower-alpha; }
ul li       { list-style: disc; }

ol.alpha > li { list-style: lower-alpha; }
ul > li       { list-style: disc; }

ol.alpha { list-style: lower-alpha; }
ul       { list-style: disc; }

3.7. `marker-side^p ~prop

`marker-side$p ~propは、 `outside$v `~marker~box$が［ ~list~item自身（すなわち，`出自の要素$）, ~list容器（すなわち，`出自の要素$の親） ］どちらの方向性【 `direction$p 】に基づいて位置するかを指定する。 前者の事例では、 ~markerの位置は，同じ~list内の各~list~itemごとに個別にアテガわれた方向性に基づいて変わり得る。 後者の事例では、 一体としての~listにアテガわれた方向性により決定され，すべての~itemは同じ側に整列することになる。 ◎ The marker-side property specifies whether an outside marker box is positioned based on the directionality of the list item itself (i.e. its originating element) or the directionality of the list container (i.e. the originating element’s parent). In the first case, the position of the marker can vary across items in the same list, based on the directionality assigned to each list item individually; in the second case they will all align on the same side, as determined by the directionality assigned to the list as a whole.

`match-self@v

`~marker~box$は、 `marker$pe の`出自の要素$の方向性を利用して位置される。 ◎ The marker box is positioned using the directionality of the ::marker’s originating element.

`match-parent@v

`~marker~box$は、 `marker$pe の`出自の要素$の親~要素の方向性を利用して位置される。 ◎ The marker box is positioned using the directionality of the ::marker’s originating element’s parent element.

<ul>
  <li>左横書きの内容
  <li><bdo dir="rtl">右横書きの内容</bdo>
  <li>左横書きの内容
  <li><bdo dir="rtl">右横書きの内容</bdo>
</ul>

このときに~markerの内側にある約物の順序が正しくなるためには、 親の `direction$p 値も取り入れる必要があろう。 [`4202$issue] ◎ For this order punctuation inside the marker correctly, it would also need to take the direction value of the parent. [Issue #4202]

次に関する課題がある ⇒＃ ~keywordを改称すること（ `5308$issue ）／ `list-style-position$p と併合すること（ `4209$issue ） ◎ There are issues open on renaming the keywords and on merging with list-style-position.

4.1. ~counterの作成-法： `counter-reset^p ~prop

~UAには、 視覚的でないものも含む すべての媒体に対し，この~propを~supportすることが期待される。 ◎ User agents are expected to support this property on all media, including non-visual ones.

`counter-reset$p ~propは、 要素~上で新たな`~counter$（たち）を`~instance化$して，指定された整数~値に設定する。 値は、 次に従って定義される： ◎ The counter-reset property instantiates new counters on an element and sets them to the specified integer values. Its values are defined as follows:

`none@v

要素は、 新たな~counterを作成しない。 ◎ This element does not create any new counters.

`counter-name$t `integer$t?

所与の ( `counter-name$t, `integer$t ) を ( `名前$cT, `値$cT ) に伴う`~counterを~instance化する$。 `integer$t が省略された場合の既定の`値$cTは、 `0^v になる。 ◎ Instantiates a counter of the given <counter-name> with a starting value of the given <integer>, defaulting to 0.

`reversed-counter-name$t `integer$t?

所与の ( `counter-name$t, `integer$t ) を ( `名前$cT, `値$cT ) に伴う`逆順に$された`~counterを~instance化する$。 `integer$t が省略された場合 【の既定の`値$cTは、`~instance化$を見よ】。 ◎ Instantiates a reversed counter of the given <counter-name> with a starting value of the given <integer>, or no starting value if not given.

h1 { counter-reset: section -1 }
h1 { counter-reset: imagenum 99 }

H1 { counter-reset: section -1 imagenum 99 }

`counter-reset$p の値に同じ `counter-name$t が複数回~生じた場合、 最後のもののみ尊守される。 ◎ If multiple instances of the same <counter-name> occur in the property value, only the last one is honored.

4.2. ~counter値の操作-法： `counter-increment^p, `counter-set^p ~prop

他の欄は、 `counter-reset$p と同じ 【なので、この訳では省略する】。 ◎ Name: counter-increment Value: [ <counter-name> <integer>? ]+ | none Initial: none Applies to: all elements Inherited: no Percentages: n/a Computed value: the keyword none or a list, each item an identifier paired with an integer Canonical order: per grammar Animation type: by computed value type ◎ User agents are expected to support this property on all media, including non-visual ones. ◎ Name: counter-set Value: [ <counter-name> <integer>? ]+ | none Initial: none Applies to: all elements Inherited: no Percentages: n/a Computed value: the keyword none or a list, each item an identifier paired with an integer Canonical order: per grammar Animation type: by computed value type

~UAには、 視覚的でないものも含む すべての媒体に対し，これらの~propを~supportすることが期待される。 ◎ User agents are expected to support this property on all media, including non-visual ones.

［ `counter-increment$p ／ `counter-set$p ］~propは、 既存の`~counter$（たち）の値を操作する。 それに先立って、 要素~上に所与の`名前$cTの~counterが無い場合に限り，その名前の`~counterを~instance化する$。 値は、 次に従って定義される： ◎ The counter-increment and counter-set properties manipulate the value of existing counters. They only instantiate new counters if there is no counter of the given name on the element yet. Their values are defined as follows:

`none^v

要素は、 どの~counterの値も改めない。 ◎ This element does not alter the value of any counters.

`counter-name$t `integer$t?

要素の`名前$cT `counter-name$t の【`最内縁$な】~counterの`値$cTを：

• `counter-set$p の場合 ⇒ 指定された `integer$t — 省略-時の既定は `0^v — に設定する。

• `counter-increment$p の場合 ⇒ 指定された `integer$t — 省略-時の既定は `1^v † — で増減する。

  【† ［ ~counterの`逆順か$cT ~EQ ~T ］の場合、 既定は `-1^v になると思われる。 】

◎ Sets (for counter-set) or increments (for counter-increment) the value of the named counter on the element to/by the specified <integer>. If the <integer> is omitted, it defaults to 1 (for counter-increment) or 0 (for counter-set).

要素 %要素 に所与の名前 %名前 を伴う~counterが無い場合、 ~counterの値を［ 設定する／増減する ］に先立って，次を遂行するとする ⇒ `~counterを~instance化する$( %名前, %要素, 0 ) ◎ If there is not currently a counter of the given name on the element, the element instantiates a new counter of the given name with a starting value of 0 before setting or incrementing its value.

h1::before {
    content: "第 " counter(章) " 章. ";
    counter-increment: 章;  /* 
章 に 1 を加算する
◎
Add 1 to chapter
 */
    counter-reset: 節;      /* 
節 を 0 に設定する
◎
Set section to 0
 */
}
h2::before {
    content: counter(章) "." counter(節) " 節. ";
    counter-increment: 節;
}

~propの値に同じ `counter-name$t が複数回~生じた場合、 それらは，現れた順に処理される — すなわち ⇒＃ `counter-increment$p に対しては，~~累積される／ `counter-set$p に対しては，最後のもののみが効果を発揮する ◎ If multiple instances of the same <counter-name> occur in the property value, they are all processed, in order. Thus increments will compound, but only the last set value will take effect.

4.3. 入子な~counterと視野

~counterは、 同じ名前の~counterを入子にし得る。 ある要素~上で新たな`~counterを~instance化する$とき，要素が同じ名前の`~counter$を親から継承している場合には、 その名前の新たな~counterを作成して，既存の~counterの内側に入子にする。 これは、 ~HTMLにおける~listの様な状況~用に重要になる。 ~listは他の~listたちを任意な深さまで入子にし得るので、 各~level間で名前が一意な~counterを定義するのは不可能になる。 `counter$f 関数は、［ 要素の【`~counter集合$内で】所与の`名前$cTを伴う~counter ］のうち，`最内縁$なものに限り検索取得する。 一方で， `counters$f 関数は、 それらすべてを利用する。 【！that contain the element】 ◎ Counters are “self-nesting”; instantiating a new counter on an element which inherited an identically-named counter from its parent creates a new counter of the same name, nested inside the existing counter. This is important for situations like lists in HTML, where lists can be nested inside lists to arbitrary depth: it would be impossible to define uniquely named counters for each level. The counter() function only retrieves the innermost counter of a given name on the element, whereas the counters() function uses all counters of a given name that contain the element.

したがって，所与の`~counter$の `視野@ は、 その~counterを最初に`~instance化$した要素【すなわち，`作成元$cT】から開始し，その［ 子孫, 後続する同胞たち, それらの子孫 ］を含むが、［ 後続する同胞の `counter-reset$p により作成された，同じ名前を伴う~counter ］の視野に入る要素は含まない — そのように明示的に`~counterを~instance化する$ことで、 先行する同胞の~counterを隠蔽できることになる。 ◎ The scope of a counter therefore starts at the first element in the document that instantiates that counter and includes the element’s descendants and its following siblings with their descendants. However, it does not include any elements in the scope of a counter with the same name created by a counter-reset on a later sibling of the element, allowing such explicit counter instantiations to obscure those earlier siblings.

各~counterとその値の視野を統治する正確な規則については、 `§ ~counterの作成-法と継承-法＠#creating-counters$ を見よ。 ◎ See § 4.4 Creating and Inheriting Counters for the exact rules governing the scope of counters and their values.

ol { counter-reset: item }
li { display: block }
li::before { content: counter(item) ". "; counter-increment: item }

4.4. ~counterの作成-法と継承-法

【 この節に定義される~modelにおいては、［ `before^pe ／ `after^pe ］疑似要素は，その`出自の要素$の［ 最初の子／最後の子 ］であると見做す必要があると思われる。 （~counterは~box~treeに対し演算するべきとも示唆されている： `674$issue ） 】

文書~内の各［ 要素／疑似要素 ］は — 先行する要素から継承するか, 要素~上で直に~instance化することを通して — その要素を`視野$に入れる`~counter$の集合を持つ（空にもなり得る）。 これらの~counterは、 `有順序~集合$†を成す `~counter集合@ （ `CSS counters set^en ）として表現される。 この集合を成す各~itemは、 ( `文字列$, 要素, 真偽値, 整数 ) からなる`~tuple$であり，~counterの ( `名前$cT, `作成元$cT, `逆順か$cT, `値$cT ) を順に表現する。 所与の名前 %N に対し，この集合~内の~itemのうち［ `名前$cT ~EQ %N ］を満たす最後のものが，名前 %N の `最内縁@ な~counterを表現する。 ◎ Each element or pseudo-element in a document has a (possibly empty) set of counters in the scope of that element, either through inheritance from another element or through instantiation on the element directly. These counters are represented as a CSS counters set, which is a set whose values are each a tuple of: a string (representing a counter’s name), an element (representing the counter’s creator), a boolean (representing whether the counter is reversed), and optionally an integer (representing the counter’s value). The latest counter of a given name in that set represents the innermost counter of that name.

【† 同等性の検査を要する箇所は無いので、 実際には`~list$と見做せる。 各~itemは、 常に別な個を成す — それらの同等性が~tupleを成す成分ごとの比較に基づくわけではない。 】

<ul style="counter-reset: example 0;">
  <li id="`foo^css" style="counter-increment: example;">
    foo
    <div id="`bar^css" style="counter-increment: example;">bar</div>
  </li>
  <li id="`baz^css">
    baz
  </li>
</ul>

#root * {
  display: block;
  border-left: groove #EEE 1em; /* 入子ng深さを表す “字下げ” */
}
#root *::before {
  content: "(" counters(%N, ".") ") = ";
  color: red;
}
#root *.reset     { counter-reset: %N; }
#root *.increment { counter-increment: %N; }
#root *.set       { counter-set: %N 10; }

4.5. ~boxを生成しない要素における~counter

~boxを生成しない要素 （例： `display$p が `none＠~CSSDISP#valdef-display-none$v に設定された要素 ／ `content$p が `none$v2 に設定された疑似要素） は、 `~counter$を操作できない — `~counter~prop$は、 そのような要素でも依然として妥当であるが，それらによる効果はないモノトスル。 ◎ An element that does not generate a box (for example, an element with display set to none, or a pseudo-element with content set to none) cannot set, reset, or increment a counter. The counter properties are still valid on such an element, but they must have no effect.

h2 { counter-increment: count2; }
h2.secret { display: none; }

注記： `visibility$p を `hidden^v に設定するなどの，要素を “隠す” だけのものは、 要素に~boxを生成させるので，このことは該当しない。 ◎ Note: Other methods of “hiding” elements, such as setting visibility to hidden, still cause the element to generate a box, and so are not excepted here.

`置換され$る子孫（例： ~HTMLの `option$e ／ ~SVGの `rect$e ）が~counterを操作できるかどうかは、 未定義である。 【！set, reset, or increment】 ］ ◎ Whether a replaced element’s descendants (such as HTML option, or SVG rect) can set, reset, or increment a counter is undefined.

注記： `置換され$る子孫~要素の挙動は、 各~実装~間の相互運用能を欠くことに因り，現時点では未定義である。 ◎ Note: The behavior on replaced element descendants is currently undefined due to a lack of interoperability across implementations.

4.6. 暗黙的な `list-item^v ~counter

作者が~style内に明示的に記して定義された`~counter$に加えて、 `~list~item$は，特別な `list-item@v ~counter — `名前$cT `list-item^v を伴う`~counter$ — を自動的に増分する。 それは、 `~list~item$上の既定の`~marker文字列$を生成するために利用される（ `list-style-type$p を見よ）。 ◎ In addition to any explicitly defined counters that authors write in their styles, list items automatically increment a special list-item counter, which is used when generating the default marker string on list items (see list-style-type).

特定的には — `counter-increment$p ~propにて， `list-item$v ~counter用に異なる増分が明示的に指定されない限り — 各`~list~item$ごとに，`~counter$が通常に増分される時点で、 その`逆順か$cTに応じて［ ~F ならば 1 ／ ~T ならば −1 ］だけ増分されるモノトスル（ちょうど，`~list~item$の `counter-increment$p の値に［ `list-item 1^v ／ `list-item -1^v ］が付加されていたかのように — 場合によっては、 新たな`~counter$を`~instance化$するなどの副作用も伴う）。 これは、 `counter-increment$p の［ `指定d値$／`算出d値$ ］には影響しない。 ◎ Specifically, unless the counter-increment property explicitly specifies a different increment for the list-item counter, it must be incremented by 1 on every list item, or if the counter is reversed, it must be incremented by -1 on every list item instead, at the same time that counters are normally incremented (exactly as if the list item had list-item 1 or list-item -1 appended to their counter-increment value, including side-effects such as possibly instantiating a new counter, etc). This does not affect the specified or computed values of counter-increment.

他のすべてに関しては、 `list-item$v `~counter$は，他の`~counter$と同様に挙動する。 作者は、 その~styleを調整する その他の目的に，`~list~item$を利用したり操作できる。 ◎ In all other respects, the list-item counter behaves like any other counter and can be used and manipulated by authors to adjust list item styling or for other purposes.

ol.evens > li { counter-increment: list-item 2; }

2. 一個目の~item
4. 二個目の~item
6. 三個目の~item

~UAおよび~host言語は、［ ~UA~stylesheet／呈示~用~hint用の~style対応付け ］において ~list~itemの~style付けを設定しておくときに， `list-item$v ~counter値が［ ~host言語~意味論に規定される下層の数量-値 ］を既定で反映することを確保するベキである。 例： `§ ~HTML用の見本~stylesheet＠#ua-stylesheet$ 【！#ua-stylsheet】 を見よ。 ◎ UAs and host languages should ensure that the list-item counter values by default reflect the underlying numeric value dictated by host language semantics when setting up list item styling in their UA style sheet and presentational hint style mappings. See, e.g. Appendix A: Sample Style Sheet For HTML.

ol > li::marker { content: counters(list-item,'.') '.'; }

1. 一個目の第一~level~item
5. 二個目の第一~level~item（ value=5 ）
   5.3. 一個目の第二~level~item（~listの start=3 ）
   5.4. 二個目の第二~level~item（~listの start=3 ）
        5.4.4. reversed ~list内の一個目の第三~level~item
        5.4.3. reversed ~list内の二個目の第三~level~item
        5.4.2. reversed ~list内の三個目の第三~level~item
        5.4.1. reversed ~list内の四個目の第三~level~item
   5.5. 三個目の第二~level~item（~listの start=3 ）
6. 三個目の第一~level~item

<ol>
  <li>一個目の第一~level~item
  <li value=5>二個目の第一~level~item（ value=5 ）
    <ol start=3>
      <li>一個目の第二~level~item（~listの start=3 ）
      <li>二個目の第二~level~item（~listの start=3 ）
         <ol reversed>
           <li>reversed ~list内の一個目の第三~level~item
           <li>reversed ~list内の二個目の第三~level~item
           <li>reversed ~list内の三個目の第三~level~item
           <li>reversed ~list内の四個目の第三~level~item
         </ol>
      <li>三個目の第二~level~item（~listの start=3 ）
    </ol>
  <li>三個目の第一~level~item
</ol>
<ol>

4.7. ~counterの出力-法： `counter^f, `counters^f 関数

`~counter$それ自体は可視~効果を伴わないが、 それらの値は［ `counter$f ／ `counters$f ］関数で利用できる — その`使用~値$は、 `~counter値$を文字列や画像として表現し，次に従って定義される： ◎ Counters have no visible effect by themselves, but their values can be used with the counter() and counters() functions, whose used values represent counter values as strings or images. They are defined as follows:

`counter@t
	= `counter()$t
	| `counters()$t
`counter@f
	= counter( `counter-name$t, `counter-style$t? )
`counters@f
	= counters( `counter-name$t, `string$t, `counter-style$t? )

ここで `counter-style$t は、 `~counter表現を生成-$するための`~counter~style$を指定する。 `css-counter-styles-3$r ◎ where <counter-style> specifies the counter style for generating a representation of the named counter(s) as defined in [css-counter-styles-3] and

`counter^f

`counter-style$t を利用して，［ 要素の`~counter集合$内の名前 `counter-name$t の`最内縁$な`~counter$の`値$cT ］用の`~counter表現を生成-$した結果を表現する。 ◎ Represents the value of the innermost counter in the element’s CSS counters set named <counter-name> using the counter style named <counter-style>.

`counters^f

次を走らせた結果を表現する：

1. %L ~LET 新たな~list
2. 要素の`~counter集合$内の ~EACH( 名前 `counter-name$t の`~counter$ %~counter ) に対し ⇒ %L に次の結果を`付加する$ ⇒ `counter-style$t を利用して［ %~counter の`値$cT ］用の`~counter表現を生成-$する
3. ~RET %L を `string$t で`連結する$

◎ Represents the values of all the counters in the element’s CSS counters set named <counter-name> using the counter style named <counter-style>, sorted in outermost-first to innermost-last order and joined by the specified <string>.

両~事例とも，`counter-style$t 引数が省略された場合、 `decimal$v が既定になる。 ◎ In both cases, if the <counter-style> argument is omitted it defaults to decimal.

注記： `counter-style$t が`disc$v 様な定義済みな記号的~styleである場合、 `list-style-type$p にて利用されるときとは，見かけが異なるかもしれない。 `CSS-COUNTER-STYLES-3$r `§ 記号的~counter~style＠~CSSCOUNTER#simple-symbolic$ を見よ。 ◎ Note: If the <counter-style> is one of the predefined symbolic styles, like disc, it might look different than when used in list-style-type. See CSS Counter Styles 3 § 6.3 Symbolic: disc, circle, square, disclosure-open, disclosure-closed.

［ `counter$f ／ `counters$f ］が利用された所で，要素の`~counter集合$内に名前 `counter-name$t の`~counter$は存在しない場合、 次を遂行しておく ⇒ `~counterを~instance化する$( その名前, 要素, `0^v ) ◎ If no counter named <counter-name> exists on an element where counter() or counters() is used, one is first instantiated with a starting value of 0.

H1::before        { content: counter(章, upper-latin) ". " }
/* 
"A. A History of Discontent"
の様な見出しを生成する。
◎
Generates headings like "A. A History of Discontent"
 */

H2::before        { content: counter(節, upper-roman) " - " }
/* 
"II - The Discontent Part"
の様な見出しを生成する。
◎
Generates headings like "II - The Discontent Part"
 */

BLOCKQUOTE::after { content: " [" counter(引用, decimal) "]" }
/* 
"... [3]"
で終端する様な引用~塊を生成する
◎
Generates blockquotes that end like "... [3]"
 */

DIV.note::before  { content: counter(notecntr, disc) " " }
/* 
単純に，どの `div.note^css の前にも~bulletを生成する
◎
Simply generates a bullet before every div.note
 */

P::before         { content: counter(p, none) }
/* 
何も挿入しない
◎
inserts nothing
 */

<ul>
  <li>一</li>
  <li>二
    <ul>
      <li>入子な一</li>
      <li>入子な二</li>
    </ul>
  </li>
  <li>三</li>
</ul>
<style>
li::marker { content: '(' counters(list-item,'.') ') '; }
</style>

(1) 一
(2) 二
   (2.1) 入子な一
   (2.2) 入子な二
(3) 三

<h1>一個目の H1</h1>
...
<h2>H1 の中の一個目の H2</h2>
...
<h2>H1 の中の二個目の H2</h2>
...
<h3>H2 の中の一個目の H3</h3>
...
<h1>二個目の H1</h1>
...
<h2>一個目の 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 の中の二個目の H2
...
A.2.i. H2 の中の一個目の H3
...
B. 二個目の H1
...
B.1. H1 の中の一個目の H2
...

~CSS~level 2 からの変更点

§ 序論にて述べたとおり、 この~moduleには， CSS2.1 に比して有意な変更点がある： ◎ As described in the introduction section, there are significant changes in this module when compared to CSS2.1.

• ~list~markerに直に~styleできるようにするため、 `marker$pe 疑似要素が導入された。 ◎ The ::marker pseudo-element has been introduced to allow styling of the list marker directly.
• `list-style-type$p は、 今や， `string$t および［ `css-counter-styles-3$r により拡張された `counter-style$t 値 ］を受容する。 ◎ list-style-type now accepts a <string> as well as the extended <counter-style> values from [css-counter-styles-3]..
• 定義済み~counter識別子として `list-item^v が導入された。 ◎ The list-item predefined counter identifier has been introduced.
• `counter-set$p ~propが追加された。 ◎ The counter-set property has been added.
• `CSS-DISPLAY-3$r に導入された`行内~level$の`~list~item$を許容した。 ◎ Allowed for inline-level list items, as introduced in [CSS-DISPLAY-3].