Overview.bs

<pre class='metadata'>
Title: CSS Lists and Counters Module Level 3
Shortname: css-lists
Level: 3
Group: CSSWG
Status: ED
Work Status: Refining
ED: https://drafts.csswg.org/css-lists-3/
TR: https://www.w3.org/TR/css-lists-3/
Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400
Editor: Tab Atkins, Google, http://xanthir.com/contact/, w3cid 42199
Former Editor: Ian Hickson, Google, ian@hixie.ch
Former Editor: Tantek Çelik, Formerly of Microsoft, tantekc@microsoft.com
Previous Version: https://www.w3.org/TR/2020/WD-css-lists-3-20200709/
Previous Version: https://www.w3.org/TR/2019/WD-css-lists-3-20190817/
Previous Version: https://www.w3.org/TR/2019/WD-css-lists-3-20190425/
Previous Version: https://www.w3.org/TR/2014/WD-css-lists-3-20140320/
Previous Version: https://www.w3.org/TR/2011/WD-css3-lists-20110524/
!Contributors: Simon Montagu, AOL-TW/Netscape, <a href="mailto:smontagu@netscape.com">smontagu@netscape.com</a>
!Contributors: Daniel Yacob, <a href="mailto:yacob@geez.org">yacob@geez.org</a>
!Contributors: Christopher Hoess, <a href="mailto:choess@stwing.upenn.edu">choess@stwing.upenn.edu</a>
!Contributors: Daniel Glazman, AOL-TW/Netscape, <a href="mailto:glazman@netscape.com">glazman@netscape.com</a>
Abstract: This module contains CSS features related to list counters: styling them, positioning them, and manipulating their value.
</pre>

<pre class='link-defaults'>
spec:css-display-4; type:property; text:display
spec:css-pseudo-4; type:selector; text:::before
spec:selectors-4; type:dfn; text:selector
spec:infra; type:dfn;
	text:list
	text:string
</pre>

<h2 id='intro'>
Introduction</h2>

	This specification defines the ''::marker'' pseudo-element,
	the ''list-item'' <a>display type</a> that generates markers,
	and several properties controlling the placement and styling of markers.

	It also defines <a>counters</a>,
	which are special numerical objects
	often used to generate the default contents of markers.

	<div class="example">
		For instance, the following example illustrates
		how markers can be used to add parentheses around each numbered list item:

		<xmp highlight=html>
			<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>
		</xmp>

			It should produce something like this:

		<pre>
			  (i) This is the first item.
			 (ii) This is the second item.
			(iii) This is the third item.
		</pre>

		Note: Note that this example is far more verbose than is usually needed in HTML,
		as the UA default style sheet takes care of most of the necessary styling.
	</div>

	With descendant selectors and child selectors,
	it's possible to specify different marker types depending on the depth of embedded lists.

<h3 id="values">
Value Definitions</h3>

	This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from [[!CSS2]]
	using the <a href="https://www.w3.org/TR/css-values-3/#value-defs">value definition syntax</a> from [[!CSS-VALUES-3]].
	Value types not defined in this specification are defined in CSS Values &amp; Units [[!CSS-VALUES-3]].
	Combination with other CSS modules may expand the definitions of these value types.

	In addition to the property-specific values listed in their definitions,
	all properties defined in this specification
	also accept the <a>CSS-wide keywords</a> as their property value.
	For readability they have not been repeated explicitly.

<h2 id='declaring-a-list-item'>
Declaring a List Item</h2>

	A <dfn export>list item</dfn> is any element with its 'display' property set to ''display/list-item''.
	<a>List items</a> generate ''::marker'' pseudo-elements;
	no other elements do.
	Additionally, <a>list items</a> automatically increment an implied ''list-item'' <a>counter</a>
	(see [[#list-item-counter]]).

<!--
██     ██    ███    ████████  ██    ██ ████████ ████████   ██████
███   ███   ██ ██   ██     ██ ██   ██  ██       ██     ██ ██    ██
████ ████  ██   ██  ██     ██ ██  ██   ██       ██     ██ ██
██ ███ ██ ██     ██ ████████  █████    ██████   ████████   ██████
██     ██ █████████ ██   ██   ██  ██   ██       ██   ██         ██
██     ██ ██     ██ ██    ██  ██   ██  ██       ██    ██  ██    ██
██     ██ ██     ██ ██     ██ ██    ██ ████████ ██     ██  ██████
-->

<h2 id='markers'>
Markers</h2>

	The defining feature of the <a>list item</a> <a>display type</a>
	is its <dfn lt="marker | marker box" export>marker</dfn>,
	a symbol or ordinal that helps denote the beginning of each <a>list item</a> in a list.
	In the CSS layout model,
	<a>list item</a> <a>markers</a> are represented by
	a <a>marker box</a> associated with each <a>list item</a>.
	The contents of this <a>marker</a> can be controlled with
	the 'list-style-type' and 'list-style-image' properties on the <a>list item</a>
	and by assigning properties to its ''::marker'' pseudo-element.

<h3 id='marker-pseudo'>
The ''::marker'' Pseudo-Element</h3>

	The <a>marker box</a> is generated by
	the ''::marker'' pseudo-element of a <a>list item</a>
	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 [[#content-property]].

	<div class="example">
		In this example, markers are used to number paragraphs that are designated as "notes":

		<xmp highlight=html>
			<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.
		</xmp>

		It should render something like this:

		<pre>
		          This is the first paragraph
		          in this document.

		  Note 1: This is a very short
		          document.

		          This is the end.
		</pre>
	</div>

	<div class="example">
		By using the ''::marker'' pseudo-element,
		a list's markers can be styled
		independently from the text of the list item itself:

		<xmp highlight=html>
			<style>
			p { margin-left: 8em } /* Make space for counters */
			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 ...
		</xmp>

		The preceding document should render something like this:

		<pre>
		        This is a long preceding
		        paragraph ...

		   <span style=color:blue;font-weight:bold;>i.</span>   This is the first item.
		  <span style=color:blue;font-weight:bold;>ii.</span>   This is the second item.
		 <span style=color:blue;font-weight:bold;>iii.</span>   This is the third item.

		        This is a long following
		        paragraph ...
		</pre>

		Previously the only way to style a marker was through inheritance;
		one had to put the desired marker styling on the list item,
		and then revert that on a wrapper element around the list item's actual contents.
	</div>

	<a>Marker boxes</a> only exist for <a>list items</a>:
	on any other element,
	the ''::marker'' pseudo-element's 'content' property must compute to ''content/none'',
	which suppresses its creation.

<h4 id='marker-properties'>
Properties Applying to ''::marker''</h4>

	All properties can be set on a ''::marker'' pseudo-element
	and will have a [=computed value=]
	which will then inherit to its text content.

	<div class=example>
		Inheritable properties that apply to text
		can be set on the ''::marker'' pseudo-element:
		these will inherit to and take effect on its text contents.
		Some examples of such properties include:
		<ul>
			<li>'text-transform', 'letter-spacing', 'word-spacing' (see [[CSS-TEXT-3]])
			<li>all the font properties (see [[CSS-FONTS-3]] and its successors)
			<li>the 'color' property (see [[CSS-COLOR-3]])
		</ul>
	</div>

	However,
	only the following CSS properties
	actually apply to a [=marker box=]:

	<ul>
		<li>the 'text-combine-upright', 'unicode-bidi', and 'direction' properties (see [[CSS-WRITING-MODES-3]])
		<li>the 'content' property (see [[#content-property]], below)
		<li>all animation and transition properties (see [[CSS-ANIMATIONS-1]] and [[CSS-TRANSITIONS-1]])
	</ul>

	Other properties should not have an effect on the [=marker box=]
	when declared directly on ''::marker''
	in the [=author origin|author=] or [=user origin=] of the [=cascade=].
	UAs may either treat such properties as not applying,
	or enforce their value or inheritance from the [=originating element=]
	by setting a [=user-agent origin=] ''!important'' rule.

	NOTE: It is expected that future specifications will extend this list of properties
	and relax the restriction on which properties can take effect.
	However at the moment outside marker box layout is not fully defined,
	so to avoid future compatibility problems only these properties are allowed.

	Additionally,
	UAs must add the following rule to their default style sheet:
	<pre>
		::marker, ::before::marker, ::after::marker {
		  unicode-bidi: isolate;
		  font-variant-numeric: tabular-nums;
		  white-space: pre;
		  text-transform: none;
		}
	</pre>

	ISSUE: ''white-space: pre'' doesn't have quite the right behavior;
	''white-space-collapse: preserve-spaces'' + ''white-space-trim: discard-after''
	might be closer to what's needed here.
	See discussion in <a href="https://github.com/w3c/csswg-drafts/issues/4448">Issue 4448</a>
	and <a href="https://github.com/w3c/csswg-drafts/issues/4891">Issue 4891</a>.

	Note: Although the ''::marker'' pseudo-element can represent
	the [=marker box=] of a ''::before'' or ''::after'' pseudo-element,
	the [=compound selector=] ''::marker'',
	which expands to ''*::marker'' [[SELECTORS-4]],
	will not select these markers--
	an [=originating element=] that is a [=pseudo-element=]
	needs to be explicitly specified in the [=selector=],
	e.g. ''::before::marker''.


<h3 id='content-property'>
Generating Marker Contents</h3>

	The contents of a <a>marker box</a>
	are determined by the first of these conditions that is true:

	<dl class=switch>
		<dt>'content' on the ''::marker'' itself is not ''content/normal''
		<dd>
			The contents of the <a>marker box</a>
			are determined as defined by the 'content' property,
			exactly as for ''::before''.

		<dt>'list-style-image' on the [=originating element=] defines a [=marker image=]
		<dd>
			The <a>marker box</a> contains
			an <a>anonymous</a> <a>inline</a> <a>replaced element</a>
			representing the specified [=marker image=],
			followed by a <a>text sequence</a> consisting of a single space (U+0020 SPACE).

		<dt>'list-style-type' on the [=originating element=] defines a [=marker string=]
		<dd>
			The <a>marker box</a> contains
			a [=text sequence=] consisting of the specified [=marker string=].

		<dt>otherwise
		<dd>
			The <a>marker box</a> has no contents
			and ''::marker'' does not generate a box.
	</dl>

	Additionally, the UA may transform into spaces or discard
	any preserved [=forced line breaks=].

<!--
██                ██████          ████ ██     ██    ███     ██████   ████████
██               ██    ██          ██  ███   ███   ██ ██   ██    ██  ██
██               ██                ██  ████ ████  ██   ██  ██        ██
██       ███████  ██████  ███████  ██  ██ ███ ██ ██     ██ ██   ████ ██████
██                     ██          ██  ██     ██ █████████ ██    ██  ██
██               ██    ██          ██  ██     ██ ██     ██ ██    ██  ██
████████          ██████          ████ ██     ██ ██     ██  ██████   ████████
-->

<h3 id='image-markers'>
Image Markers: the 'list-style-image' property</h3>

	<pre class="propdef">
	Name: list-style-image
	Value: <<image>> | none
	Initial: none
	Applies to: <a>list items</a>
	Inherited: yes
	Percentages: n/a
	Computed value: the keyword ''list-style-image/none''or the computed <<image>>
	Animation type: discrete
	</pre>

	Specifies the <dfn>marker image</dfn>,
	which is used to fill the [=list item’s=] [=marker=]
	when its 'content' is ''content/normal''.
	The values are as follows:

	<dl dfn-type="value" dfn-for="list-style-image">
		<dt><dfn><<image>></dfn>
		<dd>
			If the <<image>> represents a [=valid image=],
			specifies the element's <a>marker image</a> as the <<image>>.
			Otherwise,
			the element has no [=marker image=].

		<dt><dfn>none</dfn>
		<dd>
			The element has no <a>marker image</a>.
	</dl>

	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.

	<div class="example">
		The following example sets the marker at the beginning of each list item to
		be the image "ellipse.png".

		<pre highlight=css>li { list-style-image: url("http://www.example.com/ellipse.png") }</pre>
	</div>

<!--
██                ██████          ████████ ██    ██ ████████  ████████
██               ██    ██            ██     ██  ██  ██     ██ ██
██               ██                  ██      ████   ██     ██ ██
██       ███████  ██████  ███████    ██       ██    ████████  ██████
██                     ██            ██       ██    ██        ██
██               ██    ██            ██       ██    ██        ██
████████          ██████             ██       ██    ██        ████████
-->

<h3 id='text-markers'>
Text-based Markers: the 'list-style-type' property</h3>

	<pre class="propdef">
	Name: list-style-type
	Value: <<counter-style>> | <<string>> | none
	Initial: disc
	Applies to: <a>list items</a>
	Inherited: yes
	Percentages: n/a
	Computed value: specified value
	Animation type: discrete
	</pre>

	Specifies the <dfn>marker string</dfn>,
	which is used to fill the <a>list item</a>’s <a>marker</a>
	when its 'content' value is ''content/normal''
	and there is no [=marker image=].
	The values are as follows:

	<dl dfn-type="value" dfn-for="list-style-type">
		<dt><dfn><<counter-style>></dfn>
		<dd>
			Specifies the element’s <a>marker string</a> as
			the value of the ''counter()/list-item'' counter
			represented using the specified <<counter-style>>.

			Specifically,
			the <a>marker string</a> is
			the result of <a lt="generate a counter representation">generating a counter representation</a>
			of the ''counter()/list-item'' counter value
			using the specified <<counter-style>>,
			prefixed by the '@counter-style/prefix' of the <<counter-style>>,
			and followed by the '@counter-style/suffix' of the <<counter-style>>.
			If the specified <<counter-style>> does not exist,
			''decimal'' is assumed.

		<dt><dfn><<string>></dfn>
		<dd>
			The element’s <a>marker string</a> is the specified <<string>>.

		<dt><dfn>none</dfn>
		<dd>
			The element has no <a>marker string</a>.
	</dl>

	<div class='example'>
		The following examples illustrate how to set markers to various values:

		<pre highlight=css>
			ul { list-style-type: "★"; }
			/* Sets the marker to a "star" character */

			p.note {
				display: list-item;
				list-style-type: "Note: ";
				list-style-position: inside;
			}
			/* Gives note paragraphs a marker consisting of the string "Note: " */

			ol { list-style-type: upper-roman; }
			/* 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 '○' '●'); }
			/* Sets all unordered list items to alternate between empty and
			   filled circles for their markers. */

			ul { list-style-type: none; }
			/* Suppresses the marker entirely, unless list-style-image is specified
			   with a valid image. */
		</pre>
	</div>

<!--
██                ██████          ████████   ███████   ██████  ████ ████████ ████  ███████  ██    ██
██               ██    ██         ██     ██ ██     ██ ██    ██  ██     ██     ██  ██     ██ ███   ██
██               ██               ██     ██ ██     ██ ██        ██     ██     ██  ██     ██ ████  ██
██       ███████  ██████  ███████ ████████  ██     ██  ██████   ██     ██     ██  ██     ██ ██ ██ ██
██                     ██         ██        ██     ██       ██  ██     ██     ██  ██     ██ ██  ████
██               ██    ██         ██        ██     ██ ██    ██  ██     ██     ██  ██     ██ ██   ███
████████          ██████          ██         ███████   ██████  ████    ██    ████  ███████  ██    ██
-->


<h3 id='list-style-position-property'>
Positioning Markers: The 'list-style-position' property</h3>

	<pre class="propdef">
	Name: list-style-position
	Value: inside | outside
	Initial: outside
	Applies to: <a>list items</a>
	Inherited: yes
	Percentages: n/a
	Computed value: keyword, but see prose
	Animation type: discrete
	</pre>

	This property dictates whether the ''::marker'' is rendered inline,
	or positioned just outside of the <a>list item</a>.
	The values are as follows:

	<dl dfn-type=value dfn-for=list-style-position>
		<dt><dfn>inside</dfn>
		<dd>
			No special effect.
			(The ''::marker'' is an inline element at the start of the <a>list item's</a> contents.)

		<dt><dfn id='list-style-position-outside'>outside</dfn>
		<dd>
			If the <a>list item</a> is a <a>block container</a>:
			the marker box is a [=block container=]
			and is placed outside the [=principal box|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 <a>inline-start</a> side of the box,
			using the <a>writing mode</a> 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 ''overflow/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.

			Issue: This is handwavey nonsense from CSS2, and needs a real definition.

			If the <a>list item</a> is an <a>inline box</a>:
			this value is equivalent to ''inside''.

			Issue: Alternatively, ''outside'' could lay out the marker as a previous sibling of the principal inline box.
	</dl>

	<div class=example>
		For example:

		<pre>
			&lt;style>
				ul.compact { list-style: inside; }
				ul         { list-style: outside; }
			&lt;/style>
			&lt;ul class=compact>
				&lt;li>first "inside" list item comes first&lt;/li>
				&lt;li>second "inside" list item comes first&lt;/li>
			&lt;/ul>
			&lt;hr>
			&lt;ul>
				&lt;li>first "outside" list item comes first&lt;/li>
				&lt;li>second "outside" list item comes first&lt;/li>
			&lt;/ul>
		</pre>

		The above example may be formatted as:

		<pre>
			  * first "inside" list
			  item comes first
			  * second "inside" list
			  item comes second

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

			* first "outside" list
			  item comes first
			* second "outside" list
			  item comes second</pre>
	</div>


<!--
██       ████  ██████  ████████          ██████  ████████ ██    ██ ██       ████████
██        ██  ██    ██    ██            ██    ██    ██     ██  ██  ██       ██
██        ██  ██          ██            ██          ██      ████   ██       ██
██        ██   ██████     ██    ███████  ██████     ██       ██    ██       ██████
██        ██        ██    ██                  ██    ██       ██    ██       ██
██        ██  ██    ██    ██            ██    ██    ██       ██    ██       ██
████████ ████  ██████     ██             ██████     ██       ██    ████████ ████████
-->

<h3 id='list-style-property'>
Styling Markers: the 'list-style' shorthand property</h3>

	<pre class='propdef shorthand'>
	Name: list-style
	Value: <<'list-style-position'>> || <<'list-style-image'>> || <<'list-style-type'>>
	Applies to: <a>list items</a>
	</pre>

	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.

	<div class="example">
		For example:

		<pre highlight=css>
			ul { list-style: upper-roman inside }  /* Any UL */
			ul ul { list-style: circle outside } /* Any UL child of a UL */
		</pre>
	</div>

	Using a value of <css>none</css> in the shorthand is potentially ambiguous,
	as <css>none</css> is a valid value for both 'list-style-image' and 'list-style-type'.
	To resolve this ambiguity,
	a value of <css>none</css> in the shorthand must be applied to whichever of the two properties aren't otherwise set by the shorthand.

	<div class='example'>
		<pre highlight=css>
			list-style: none disc;
			/* Sets the image to "none" and the type to "disc". */

			list-style: none url(bullet.png);
			/* Sets the image to "url(bullet.png)" and the type to "none". */

			list-style: none;
			/* Sets both image and type to "none". */

			list-style: none disc url(bullet.png);
			/* Syntax error */
		</pre>
	</div>

	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.

	<div class=example highlight=css>
		Although authors may specify 'list-style' information directly on list item elements
		(e.g., <{li}> in HTML),
		they should do so with care.
		Consider the following rules:

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

		The above won't work as expected.
		If you nest a <{ul}> into an <a element lt="ol">ol class=alpha</a>,
		the first rule's specificity will make the <{ul}>’s list items use the lower-alpha style.

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

		These work as intended.

		<pre>
			ol.alpha { list-style: lower-alpha; }
			ul       { list-style: disc; }
		</pre>

		These are even better,
		since inheritance will transfer the 'list-style' value to the list items.
	</div>

<!--
██     ██    ███    ████████  ██    ██ ████████ ████████           ██████  ████ ████████  ████████
███   ███   ██ ██   ██     ██ ██   ██  ██       ██     ██         ██    ██  ██  ██     ██ ██
████ ████  ██   ██  ██     ██ ██  ██   ██       ██     ██         ██        ██  ██     ██ ██
██ ███ ██ ██     ██ ████████  █████    ██████   ████████  ███████  ██████   ██  ██     ██ ██████
██     ██ █████████ ██   ██   ██  ██   ██       ██   ██                 ██  ██  ██     ██ ██
██     ██ ██     ██ ██    ██  ██   ██  ██       ██    ██          ██    ██  ██  ██     ██ ██
██     ██ ██     ██ ██     ██ ██    ██ ████████ ██     ██          ██████  ████ ████████  ████████
-->

<h3 id='marker-side'>
The 'marker-side' property</h3>

	<pre class='propdef'>
	Name: marker-side
	Value: match-self | match-parent
	Initial: match-self
	Applies to: <a>list items</a>
	Inherited: yes
	Percentages: n/a
	Computed value: specified keyword
	Animation type: discrete
	</pre>

	The 'marker-side' property specifies
	whether an ''list-style-position/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.

	<dl dfn-type=value dfn-for=marker-side>
		<dt><dfn>match-self</dfn>
		<dd>
			The [=marker box=] is positioned
			using the directionality of the ''::marker''’s [=originating element=].

		<dt><dfn>match-parent</dfn>
		<dd>
			The [=marker box=] is positioned
			using the directionality of the ''::marker''’s [=originating element’s=] parent element.
	</dl>

	<div class='example'>
		By default, elements or ''::marker'' pseudo-elements
		position themselves according to their list item's directionality.
		However, if the list item is grouped with several other list items which may have different directionality
		(for example, multiple &lt;li>s with different "dir" attributes in an &lt;ol> in HTML),
		it is sometimes more useful to have all the markers line up on one side,
		so the author can specify a single "gutter" on that side
		and be assured that all the markers will lie in that gutter and be visible.

		Both of the following example renderings are generated from the following HTML,
		with the only difference being the value of 'marker-side' on the list:

		<pre highlight=html>
			&lt;ul>
			  &lt;li>english one
			  &lt;li dir=rtl>OWT WERBEH
			  &lt;li>english three
			  &lt;li dir=rtl>RUOF WERBEH
			&lt;/ul>
		</pre>

		<table class=data style="width: 35em;">
			<thead>
				<tr>
					<th>''match-self''
					<th>''match-parent''
			<tbody>
				<tr>
					<td style="border-right: thin solid">
						<pre>
* english one
		 OWT WERBEH *
* english three
		RUOF WERBEH *</pre>
					<td>
						<pre>
* english one
*    OWT WERBEH
* english three
*   RUOF WERBEH</pre>
		</table>
	</div>

	ISSUE(4202): For this order punctuation inside the marker correctly,
	it would also need to take the 'direction' value of the parent.

	ISSUE: There are issues open on <a href="https://github.com/w3c/csswg-drafts/issues/5308">renaming the keywords</a> and on <a href="https://github.com/w3c/csswg-drafts/issues/4209">merging with <css>list-style-position</css></a>.
<!--
 ██████   ███████  ██     ██ ██    ██ ████████ ████████ ████████   ██████
██    ██ ██     ██ ██     ██ ███   ██    ██    ██       ██     ██ ██    ██
██       ██     ██ ██     ██ ████  ██    ██    ██       ██     ██ ██
██       ██     ██ ██     ██ ██ ██ ██    ██    ██████   ████████   ██████
██       ██     ██ ██     ██ ██  ████    ██    ██       ██   ██         ██
██    ██ ██     ██ ██     ██ ██   ███    ██    ██       ██    ██  ██    ██
 ██████   ███████   ███████  ██    ██    ██    ████████ ██     ██  ██████
-->

<h2 id='auto-numbering'>
Automatic Numbering With Counters</h2>

	A <dfn export>counter</dfn> is a special numeric tracker
	used, among other things, to automatically number list items in CSS.
	Every element has a collection of zero or more counters,
	which are inherited through the document tree in a way similar to inherited property values.
	[=Counters=] have a <dfn export for="CSS counter">name</dfn> and <dfn export for="CSS counter">creator</dfn>,
	which identify the counter,
	a boolean <dfn export for="CSS counter">reversed</dfn> (false by default),
	and an integer <dfn export for="CSS counter">value</dfn> (optional when the counter is <a>reversed</a>).
	They are created and manipulated with
	the <dfn export>counter properties</dfn> 'counter-increment', 'counter-set' and 'counter-reset',
	and used with the ''counter()'' and ''counters()'' [=functional notations=].

	Counters are referred to in CSS syntax
	using the <dfn><<counter-name>></dfn> type,
	which represents their name as a <<custom-ident>>.
	A <<counter-name>> name cannot match the keyword ''counter-reset/none'';
	such an identifier is [=invalid=] as a <<counter-name>>.

	A <a>reversed</a> counter is created with the ''reversed()'' [=functional notation=],
	which is defined as follows:

	<pre class="prod">
		<dfn><<reversed-counter-name>></dfn> = reversed( <<counter-name>> )
	</pre>

	Resolving [=counter=] values on a given element is a multi-step process:

	1. Existing counters are [=inherit counters|inherited=] from previous elements.
	2. New counters are [=instantiated=] ('counter-reset').
	3. Counter values are incremented ('counter-increment').
	4. Counter values are explicitly set ('counter-set').
	5. Counter values are used (''counter()''/''counters()'').

	UAs may have implementation-specific limits
	on the maximum or minimum value of a counter.
	If a counter reset, set, or increment
	would push the value outside of that range,
	the value must be clamped to that range.

<h3 id='counter-reset'>
Creating Counters: the 'counter-reset' property</h3>

	<pre class="propdef">
	Name: counter-reset
	Value: [ <<counter-name>> <<integer>>? | <<reversed-counter-name>> <<integer>>? ]+ | none
	Initial: none
	Applies to: all elements
	Inherited: no
	Percentages: n/a
	Computed value: the keyword ''counter-reset/none'' or a list, each item an identifier or a ''reversed()'' function paired with an integer
	Animation type: by computed value type
	</pre>

	<p class=all-media>User agents are expected to support this property on all media, including non-visual ones.

	The 'counter-reset' property [=instantiates=] new [=counters=] on an element
	and sets them to the specified integer values.
	Its values are defined as follows:

	<dl dfn-type=value dfn-for=counter-reset>
		<dt><dfn>none</dfn>
		<dd>
			This element does not create any new counters.

		<dt><dfn><<counter-name>> <<integer>>?</dfn>
		<dd>
			[=Instantiates=] a counter of the given <<counter-name>>
			with a starting value of the given <<integer>>,
			defaulting to ''0''.

		<dt><dfn><<reversed-counter-name>> <<integer>>?</dfn>
		<dd>
			[=Instantiates=] a <a>reversed</a> counter of the given <<counter-name>>
			with a starting value of the given <<integer>>,
			or no starting value if not given.
	</dl>

	<div class='example' highlight=css>
		Note that counter properties follow the [=cascading=] rules as normal.
		Thus, due to cascading, the following style sheet:

		<pre>
			h1 { counter-reset: section -1 }
			h1 { counter-reset: imagenum 99 }
		</pre>

		will only reset ''imagenum''.
		To reset both counters,
		they have to be specified together:

		<pre>H1 { counter-reset: section -1 imagenum 99 }</pre>

		The same principles apply to the 'counter-set' and 'counter-increment' properties.
		See [[css-cascade-4]].
	</div>

	If multiple instances of the same <<counter-name>> occur in the property value,
	only the last one is honored.

<h3 id='increment-set'>
Manipulating Counter Values: the 'counter-increment' and 'counter-set' properties</h3>

	<pre class='propdef'>
	Name: counter-increment
	Value: [ <<counter-name>> <<integer>>? ]+ | none
	Initial: none
	Applies to: all elements
	Inherited: no
	Percentages: n/a
	Computed value: the keyword ''counter-reset/none'' or a list, each item an identifier paired with an integer
	Animation type: by computed value type
	</pre>

	<p class=all-media>User agents are expected to support this property on all media, including non-visual ones.

	<pre class='propdef'>
	Name: counter-set
	Value: [ <<counter-name>> <<integer>>? ]+ | none
	Initial: none
	Applies to: all elements
	Inherited: no
	Percentages: n/a
	Computed value: the keyword ''counter-reset/none'' or a list, each item an identifier paired with an integer
	Animation type: by computed value type
	</pre>

	<p class=all-media>User agents are expected to support this property on all media, including non-visual ones.

	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:

	<dl dfn-type=value dfn-for="counter-set,counter-increment">
		<dt><dfn>none</dfn>
		<dd>
			This element does not alter the value of any counters.

		<dt><dfn><<counter-name>> <<integer>>?</dfn>
		<dd>
			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').

			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.
	</dl>

	<div class="example">
		<p>This example shows a way to number chapters and sections with "Chapter 1", "1.1", "1.2", etc.

		<pre highlight=css>
			h1::before {
					content: "Chapter " counter(chapter) ". ";
					counter-increment: chapter;  /* Add 1 to chapter */
					counter-reset: section;      /* Set section to 0 */
			}
			h2::before {
					content: counter(chapter) "." counter(section) " ";
					counter-increment: section;
			}
		</pre>
	</div>

	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.

<h3 id='nested-counters'>
Nested Counters and Scope</h3>

	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.

	The <dfn lt="counter scope" local-lt="scope">scope</dfn> 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.

	See [[#creating-counters]] for the exact rules governing the scope of counters and their values.

	<div class="example" id='counter-nesting-example'>
		The following code numbers nested list items.
		The result is very similar to that of setting ''display:list-item'' and ''list-style: inside'' on the LI element:

		<pre highlight=css>
			ol { counter-reset: item }
			li { display: block }
			li::before { content: counter(item) ". "; counter-increment: item }
		</pre>

		In this example,
		an <a element>ol</a> will create a counter,
		and all children of the <a element>ol</a> will refer to that counter.

		If we denote the <var>n</var><sup>th</sup> instance of the ''item'' counter by item<sub><var>n</var></sub>,
		then the following HTML fragment will use the indicated counters.

		<div class='ol'>
			<div class='ol'><code>&lt;ol></code> item<sub>0</sub> is created, set to 0
				<div class='li'><code>&lt;li></code> item<sub>0</sub> is incremented to 1</div>
				<div class='li'><code>&lt;li></code> item<sub>0</sub> is incremented to 2
					<div class='ol'><code>&lt;ol></code> item<sub>1</sub> is created, set to 0, nested in item<sub>0</sub>
						<div class='li'><code>&lt;li></code> item<sub>1</sub> is incremented to 1</div>
						<div class='li'><code>&lt;li></code> item<sub>1</sub> is incremented to 2</div>
						<div class='li'><code>&lt;li></code> item<sub>1</sub> is incremented to 3
							<div class='ol'><code>&lt;ol></code> item<sub>2</sub> is created, set to 0, nested in item<sub>1</sub>
								<div class='li'><code>&lt;li></code> item<sub>2</sub> is incremented to 1</div>
								<code>&lt;/ol></code>
							</div>
						</div>
						<div class='li'><code>&lt;li></code> item<sub>1</sub> is incremented to 4
							<div class='ol'><code>&lt;ol></code> item<sub>3</sub> is created, set to 0, nested in item<sub>1</sub>
								<div class='li'><code>&lt;li></code> item<sub>3</sub> is incremented to 1</div>
								<code>&lt;/ol></code>
							</div>
						</div>
						<div class='li'><code>&lt;li></code> item<sub>1</sub> is incremented to 5</div>
						<code>&lt;/ol></code>
					</div>
				</div>
				<div class='li'><code>&lt;li></code> item<sub>0</sub> is incremented to 3</div>
				<div class='li'><code>&lt;li></code> item<sub>0</sub> is incremented to 4</div>
				<code>&lt;/ol></code>
			</div>
			<div class='ol'><code>&lt;ol></code> item<sub>4</sub> is created, set to 0
				<div class='li'><code>&lt;li></code> item<sub>4</sub> is incremented to 1</div>
				<div class='li'><code>&lt;li></code> item<sub>4</sub> is incremented to 2</div>
				<code>&lt;/ol></code>
			</div>
		</div>
		<style>
		#counter-nesting-example .ol { background: rgba(0,0,0,.1); margin: .5em 0; padding: .2em .5em; }
		#counter-nesting-example .li > .ol { margin: 0 0 0 1em; }
		#counter-nesting-example .li { list-style: none; margin-left: 1em;}
		</style>
	</div>

<h3 id="creating-counters">
Creating and Inheriting Counters</h3>

	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 <dfn>CSS counters set</dfn>,
	which is a [=/set=]
	whose values are each a [=tuple=] of:
	a [=string=] (representing a counter’s [=CSS counter/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 <dfn>innermost</dfn> counter of that name.

<h4 id="inheriting-counters">
Inheriting Counters</h4>

	<div algorithm>
		An element [=inherit counters|inherits=] its initial set of counters
		from its parent and preceding <em>sibling</em>.
		It then takes the values for those counters
		from the values of the matching counters
		on its preceding <em>element in [=tree order=]</em>
		(which might be its parent,
		its preceding sibling,
		or a descendant of its previous sibling).
		To <dfn>inherit counters</dfn>
		into an |element|:

		1. If |element| is the [=tree/root=] of its document tree,
			the element has an initially-empty [=CSS counters set=].
			Return.

		2. Let |element counters|,
			representing |element|’s own [=CSS counters set=],
			be a copy of the [=CSS counters set=]
			of |element|'s parent element.

		3. Let |sibling counters| be the [=CSS counters set=]
			of |element|'s preceding sibling (if it has one),
			or an empty [=CSS counters set=] otherwise.

			[=map/For each=] |counter| of |sibling counters|,
			if |element counters| does not already contain a counter with the same [=CSS counter/name=],
			append a copy of |counter| to |element counters|.

		4. Let |value source| be the [=CSS counters set=]
			of the element immediately preceding |element| in [=tree order=].

			[=map/For each=] |source counter| of |value source|,
			if |element counters| [=set/contains=] a [=counter=]
			with the same [=CSS counter/name=] and [=creator=],
			then set the [=value=] of that counter
			to |source counter|'s [=value=].
	</div>

	<div class='example' id='counter-inheritance-example'>
		Take the following code as an example:

		<pre>
			&lt;ul style='counter-reset: example 0;'>
				<b class='foo'>&lt;li id='foo' style='counter-increment: example;'></b>
					foo
					<b class='bar'>&lt;div id='bar' style='counter-increment: example;'>bar&lt;/div></b>
				&lt;/li>
				<b class='baz'>&lt;li id='baz'></b>
					baz
				&lt;/li>
			&lt;/ul>
		</pre>

		Recall that [=tree order=] turns a document tree into an ordered list,
		where an element comes before its children,
		and its children come before its next sibling.
		In other words,
		for a language like HTML,
		it's the order in which the parser encounters start tags as it reads the document.

		In here, the <{ul}> element establishes a new counter named ''example'',
		and sets its value to ''0''.
		The <b class='foo'>#foo</b> element, being the first child of the <{ul}>,
		inherits this counter.
		Its parent is also its immediately preceding element in [=tree order=],
		so it inherits the value ''0'' with it,
		and then immediately increments the value to ''1''.

		The same happens with the <b class='bar'>#bar</b> element.
		It inherits the ''example'' counter from <b class='foo'>#foo</b>,
		and inherits the value ''1'' from it as well
		and increments it to ''2''.

		However, the <b class='baz'>#baz</b> element is a bit different.
		It inherits the ''example'' counter from the <b class='foo'>#foo</b> element,
		its previous sibling.
		However, rather than inheriting the value ''1'' from <b class='foo'>#foo</b> along with the counter,
		in inherits the value ''2'' from <b class='bar'>#bar</b>, the previous element in [=tree order=].

		This behavior allows a single counter to be used throughout a document,
		continuously incrementing,
		without the author having to worry about the nested structure of their document.
	</div>
	<style>
	#counter-inheritance-example b.foo { color: red; }
	#counter-inheritance-example b.bar { color: green; }
	#counter-inheritance-example b.baz { color: blue; }
	</style>

	Note: Counter inheritance, like regular CSS [=inheritance=],
	operates on the “flattened element tree”
	in the context of the [[DOM]].

<h4 id="instantiating-counters">
Instantiating Counters</h4>

	<div algorithm>
		[=Counters=] are [=instantiated=] when named in 'counter-reset',
		and also when not otherwise present if named in
		'counter-increment', 'counter-set', or the ''counter()'' or ''counters()'' notations.
		(Newly [=instantiated=] [=counters=] replace identically-named [=counters=] originating from previous siblings,
		but are added in addition to identically-named [=counters=] originating from ancestor elements,
		see [[#nested-counters]].)
		To <dfn lt="instantiate counter" local-lt="instantiate">instantiate a counter</dfn>
		of a given |name|
		on an |element|,
		optionally |reversed|,
		with an optional starting |value|:

		1. Let |counters| be |element|’s [=CSS counters set=].

		2. Let |innermost counter| be the last [=counter=] in |counters|
			with the name |name|.
			If |innermost counter|’s originating element
			is |element| or a previous sibling of |element|,
			[=set/remove=] |innermost counter| from |counters|.

		3. [=set/Append=] a new [=counter=] to |counters|
			with name |name|,
			originating element |element|,
			reversed being |reversed|,
			and initial value |value| (if given)
	</div>

	When a [=counter=] is [=instantiated=] without an initial value,
	the user agent must dynamically calculate the initial value at layout-time
	to be the value returned by the following algorithm:

	1. Let |num| be 0.

	2. Let |lastNonZeroIncrementNegated| be 0.

	3. For each element or pseudo-element |el| that increments or
		sets the same counter in the same [=scope=]:

		1. Let |incrementNegated| be |el|'s 'counter-increment' integer value for this counter,
			multiplied by -1.

		2. If |incrementNegated| is not zero,
			then set |lastNonZeroIncrementNegated| to |incrementNegated|.

		3. If |el| sets this counter with 'counter-set',
			then add that integer value to |num| and
			break this loop.

		4. Add |incrementNegated| to |num|.

	4. Add |lastNonZeroIncrementNegated| to |num|.

	5. Return |num|.

	Note: Only [=reversed=] counters can be instantiated without an initial value.

<h3 id='counters-without-boxes'>
Counters in elements that do not generate boxes</h3>

	An element that does not generate a box
	(for example, an element with 'display' set to ''display/none'', or a pseudo-element with 'content' set to ''content/none'')
	cannot set, reset, or increment  a counter.
	The counter properties are still valid on such an element,
	but they must have no effect.

	<div class="example">
			For example, with the following style sheet,
			H2s with class "secret" do not increment ''count2''.

		<pre highlight=css>
			h2 { counter-increment: count2; }
			h2.secret { display: none; }
		</pre>
	</div>

	Note: Other methods of “hiding” elements,
	such as setting 'visibility' to ''visibility/hidden'',
	still cause the element to generate a box,
	and so are not excepted here.

	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.


<h3 id="list-item-counter">
The Implicit ''list-item'' Counter</h3>

	In addition to any explicitly defined [=counters=]
	that authors write in their styles,
	[=list items=] automatically increment
	a special <dfn value for="counter-increment, counter-set, counter-reset, counter(), counters()">list-item</dfn> <a>counter</a>,
	which is used when generating the default [=marker string=] on [=list items=]
	(see 'list-style-type').

	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 <a>reversed</a>,
	it must be incremented by -1 on every [=list item=] instead,
	at the same time that <a>counters</a> 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 value|specified=] or [=computed values=]
	of 'counter-increment'.

	<div class="example">
		Because each [=list item=] automatically increments
		the ''counter-increment/list-item'' counter by 1,
		consecutive [=list items=] with a numeric 'list-style-type'
		will be consecutively numbered by default--
		even if the author sets 'counter-increment' to another value
		such as ''counter-increment: itemnumber'' or even ''counter-increment/none''.
		This protects the automatic ''counter-increment/list-item'' counter
		from inadvertently being overridden
		by declarations intended to address other counters.

		However, since the automatic ''counter-increment/list-item'' increment
		<em>does not</em> happen
		if the [=list item’s=] 'counter-increment'
		explicitly mentions the ''list-item'' counter,
		''li { counter-increment: list-item 2; }''
		will increment ''list-item'' by 2 as specified,
		not by 3 as would happen
		if ''list-item 1'' were unconditionally appended.

		This also allows to turn off the automatic ''list-item'' counter increment,
		by overriding it explicitly, e.g. ''counter-increment: list-item 0;''.
	</div>

	In all other respects, the ''counter-increment/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.

	<div class="example">

		In the following example,
		the list is modified to count by twos:

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

		A three-item list would be rendered as

		<pre>
		  2. First Item
		  4. Second Item
		  6. Third Item
		</pre>
	</div>

	UAs and host languages should ensure
	that the ''counter-increment/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. [[#ua-stylesheet]].

	<!--
	See old <a href="https://github.com/w3c/csswg-drafts/issues/2464#issuecomment-375492907">WG discussions</a>
	and newer <a href="https://github.com/w3c/csswg-drafts/issues/3686">issue discussion</a>.
	-->

	<div class="example">
		In the following example,
		the 'content' property is used to create tiered numbering
		that hooks into the ''counter-increment/list-item'' counter,
		and thus respects any numbering changes inflicted through HTML:

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

		Nested lists using this rule would be rendered like

		<pre>
		  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
		</pre>

		given markup such as

		<xmp>
			<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>
						<li>Third second-level item, list start=3
					</ol>
				<li>Third top-level item
			</ol>
		</xmp>
	</div>

<!--
 ██████   ███████  ██     ██ ██    ██ ████████ ████████ ████████    ███ ███
██    ██ ██     ██ ██     ██ ███   ██    ██    ██       ██     ██  ██     ██
██       ██     ██ ██     ██ ████  ██    ██    ██       ██     ██ ██       ██
██       ██     ██ ██     ██ ██ ██ ██    ██    ██████   ████████  ██       ██
██       ██     ██ ██     ██ ██  ████    ██    ██       ██   ██   ██       ██
██    ██ ██     ██ ██     ██ ██   ███    ██    ██       ██    ██   ██     ██
 ██████   ███████   ███████  ██    ██    ██    ████████ ██     ██   ███ ███
-->

<h3 id='counter-functions'>
Outputting Counters: the ''counter()'' and ''counters()'' functions</h3>

	[=Counters=] have no visible effect by themselves,
	but their values can be used
	with the <dfn>counter()</dfn> and <dfn>counters()</dfn> functions,
	whose [=used values=] represent counter values as strings or images.
	They are defined as follows:

	<pre class="prod">
		<dfn><<counter>></dfn> = <<counter()>> | <<counters()>>
		<<counter()>>  =  counter( <<counter-name>>, <<counter-style>>? )
		<<counters()>> = counters( <<counter-name>>, <<string>>, <<counter-style>>? )
	</pre>

	where <<counter-style>> specifies the [=counter style=]
	for <a lt="generate a counter representation">generating a representation</a>
	of the named counter(s)
	as defined in [[!css-counter-styles-3]] and

	<dl>
		<dt>counter()
		<dd>
			Represents the value of the [=innermost=] [=counter=]
			in the element’s [=CSS counters set=]
			named <<counter-name>>
			using the [=counter style=] named <<counter-style>>.

		<dt>counters()
		<dd>
			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>>.
	</dl>

	In both cases,
	if the <<counter-style>> argument is omitted it defaults to ''decimal''.

	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#simple-symbolic]].

	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''.

	<div class="example">
		<pre>
			H1::before        { content: counter(chno, upper-latin) ". " }
			/* Generates headings like "A. A History of Discontent" */

			H2::before        { content: counter(section, upper-roman) " - " }
			/* Generates headings like "II - The Discontent Part" */

			BLOCKQUOTE::after { content: " [" counter(bq, decimal) "]" }
			/* Generates blockquotes that end like "... [3]" */

			DIV.note::before  { content: counter(notecntr, disc) " " }
			/* Simply generates a bullet before every div.note */

			P::before         { content: counter(p, none) }
			/* inserts nothing */
		</pre>
	</div>

	<div class='example'>
		The following example shows a simple use of the ''counters()'' function:

		<pre highlight=html>
			&lt;ul>
				&lt;li>one&lt;/li>
				&lt;li>two
					&lt;ul>
						&lt;li>nested one&lt;/li>
						&lt;li>nested two&lt;/li>
					&lt;/ul>
				&lt;/li>
				&lt;li>three&lt;/li>
			&lt;/ul>
			&lt;style>
			li::marker { content: '(' counters(list-item,'.') ') '; }
			&lt;/style>
		</pre>

		The preceding document should render something like this:

		<pre>
			(1) one
			(2) two
				 (2.1) nested one
				 (2.2) nested two
			(3) three
		</pre>
	</div>

	<div class='example'>
		Because counters inherit to siblings as well,
		they can be used to number headings and subheadings,
		which aren't nested within each other.
		Unfortunately,
		this prevents the use of ''counters()'' as counters from siblings don't nest,
		but one can create multiple counters and manually concatenate them instead:

		<pre highlight=html>
			&lt;h1>First H1&lt;/h1>
			...
			&lt;h2>First H2 in H1&lt;/h2>
			...
			&lt;h2>Second H2 in H1&lt;/h2>
			...
			&lt;h3>First H3 in H2&lt;/h3>
			...
			&lt;h1>Second H1&lt;/h1>
			...
			&lt;h2>First H2 in H1&lt;/h2>
			...
			&lt;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) ' '; }
			&lt;/style>
		</pre>

		The preceding document should render something like this:

		<pre>
			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
			...
		</pre>
	</div>

	<div class=issue>
		Counters are sometimes useful for things other than printing markers.
		In general, they provide the ability to number elements in sequence,
		which can be useful for other properties to reference.
		For example, using 'order' to put an element between two other specific elements
		currently requires you to explicitly put 'order' on every element before and/or after the desired insertion point.
		If you can set the 'order' value of everything to a counter though,
		you can more easily insert an element into an arbitrary spot between two others.

		Other use-cases involve nested or sibling elements with transforms that are meant to be slightly different from each other.
		Today you have to use a preprocessor to do this in a reasonable way,
		but a counter would make it work well in "plain" CSS.

		(You can built up successive values in the nested case today
		by using <a>custom properties</a> and stacking up nested ''calc()''s,
		but this is a *little bit* clumsy,
		and doesn't work for siblings.)

		Suggestion is to add a <css>counter-value(<<counter-name>>)</css> function,
		which returns the value of the named counter as an integer,
		rather than returning a string.

		See <a href="https://github.com/w3c/csswg-drafts/issues/1026">Issue 1026</a>.
	</div>


<!--
 ██████  ████████ ██    ██ ██       ████████  ██████  ██     ██ ████████ ████████ ████████
██    ██    ██     ██  ██  ██       ██       ██    ██ ██     ██ ██       ██          ██
██          ██      ████   ██       ██       ██       ██     ██ ██       ██          ██
 ██████     ██       ██    ██       ██████    ██████  █████████ ██████   ██████      ██
      ██    ██       ██    ██       ██             ██ ██     ██ ██       ██          ██
██    ██    ██       ██    ██       ██       ██    ██ ██     ██ ██       ██          ██
 ██████     ██       ██    ████████ ████████  ██████  ██     ██ ████████ ████████    ██
-->

<h2 id='ua-stylesheet'>
Appendix A: Sample Style Sheet For HTML</h2>

	<em>This section is informative, not normative.
	The [[HTML]] <a href="https://html.spec.whatwg.org/multipage/rendering.html#lists">Rendering</a> chapter
	defines the normative default properties that apply to HTML lists;
	this sample style sheet is provided to illustrate the CSS features
	using familiar markup conventions.</em>

	<pre>
		/* Set up list items */
		li {
			display: list-item; /* implies 'counter-increment: list-item' */
		}

		/* Set up ol and ul so that they scope the list-item counter */
		ol, ul {
			counter-reset: list-item;
		}

		/* Default list style types for lists */
		ol { list-style-type: decimal; }
		ul { list-style-type: toggle(disc, circle, square); }

		/* The type attribute on ol and ul elements */
		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; }

		/* The start attribute on ol elements */
		ol[start] {
			counter-reset: list-item calc(attr(start integer, 1) - 1);
		}

		/* The value attribute on li elements */
		li[value] {
			counter-set: list-item attr(value integer, 1);
		}

		/* Handling reversed lists */
		ol[reversed] {
			counter-reset: reversed(list-item);
		}
		ol[reversed][start] {
			counter-reset: reversed(list-item) calc(attr(start integer) + 1);
		}

		/* Box Model Rules */
		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;
		}
	</pre>

<h2 class="no-num" id="acknowledgments">
Acknowledgments</h2>

	<p>This specification is made possible by input from
	Aharon Lanin,
	Arron Eicholz,
	Brad Kemper,
	David Baron,
	Emilio Cobos Álvarez,
	Mats Palmgren,
	Oriol Brufau,
	Simon Sapin,
	Xidorn Quan


<h2 class="no-num" id="changes">Changes</h2>

This section documents the changes since previous publications.

<h3 id="changes-20200709">Changes since the 9 July 2020 WD</h3>

	<ul>
		<li>Clarified properties that apply to ''::marker'' boxes
		vs. to the contents of ''::marker'' boxes.
		(<a href="https://github.com/w3c/csswg-drafts/issues/4568">Issue 4568</a>)
		<li>Added ''text-transform: none'' to the UA default style sheet for ''::marker''.
		(<a href="https://github.com/w3c/csswg-drafts/issues/4206">Issue 4206</a>)
		<li>Changed counter inheritance to take from the parent first,
			and only take from the sibling if it's a new counter.
			(<a href="https://github.com/w3c/csswg-drafts/issues/5477">Issue 5477</a>)
	</ul>

<h3 id="changes-20190817">Changes since the 17 August 2019 WD</h3>

	<ul>
		<li>Specified that ''outside'' list markers [=block containers=].
		(Their [=outer display type=] remains undefined.)

		<li>Stole list of properties applying to ''::marker'' from [[CSS-PSEUDO-4]]
		and added animations, transitions, and 'white-space'.

		<li>Added ''white-space: pre'' to UA default style sheet for ''::marker''.
		(<a href="https://github.com/w3c/csswg-drafts/issues/4448">Issue 4448</a>)
		Note, however, that the exact white space processing behavior of marker boxes
		is still being worked out.
	</ul>

<h3 id="changes-20190425">Changes since the 25 April 2019 WD</h3>

	<ul>
		<li>Rewrote the [[#auto-numbering]] section for better precision, editorial clarity, and synchronization with CSS2.
	</ul>

<h3 id="changes-20140320">Changes since the 20 March 2014 WD</h3>

	<ul>
		<li>Use <<custom-ident>> consistently for counter names.
		<li>Dropped ''position: marker'' (marker positioning is now mostly undefined, as in CSS2).
		<li>Completely rewrote chapter on markers to tighten it up,
		    align with current expectations, and make editorial improvements.
		<li>Pulled the ''counter-increment/list-item'' counter definition
		    into its own section, added examples, and made some clarifications.
		<li>Renamed values of 'marker-side' to match conventions from box/text alignment.
		<li>Defined that 'counter-set' is applied after 'counter-increment'
		    rather than before.
		    (<a href="https://github.com/w3c/csswg-drafts/issues/3810">Issue 3810</a>)
		<li>Established the canonical order of 'list-style' serialization
		    to put <<'list-style-type'>> last.
		    (<a href="https://github.com/w3c/csswg-drafts/issues/2624">Issue 2624</a>)
	</ul>

<h3 id="changes-from-css2">Changes From CSS Level 2</h3>

	<p>As described in the introduction section,
	there are significant changes in this module when compared to CSS2.1.

	<ol>
		<li>The ''::marker'' pseudo-element has been introduced to allow styling of the list marker directly.

		<li>'list-style-type' now accepts a <<string>>
		as well as the extended <<counter-style>> values from [[css-counter-styles-3]]..

		<li>The ''counter-set/list-item'' predefined counter identifier has been introduced.

		<li>The 'counter-set' property has been added.

		<li>Allowed for <a>inline-level</a> <a>list items</a>, as introduced in [[CSS-DISPLAY-3]].
	</ol>

<h2 class=no-num id=privacy>Privacy Considerations</h2>

No new privacy considerations have been reported on this specification.

<h2 class=no-num id=security>Security Considerations</h2>

No new security considerations have been reported on this specification.