8000 csswg-drafts/css-lists/Overview.bs at 914790fe62140c5deb389ac3dfea7b128b860fa8 · w3c/csswg-drafts · GitHub
Skip to content

Overview.bs

Latest commit

 

History

History
1427 lines (1164 loc) · 48.7 KB

Overview.bs

File metadata and controls

1427 lines (1164 loc) · 48.7 KB
<h1>CSS Lists and Counters Module Level 3</h1>
<pre class='metadata'>
Shortname: css-lists
Level: 3
Group: CSSWG
Status: ED
Work Status: Exploring
ED: https://drafts.csswg.org/css3-lists/
TR: https://www.w3.org/TR/css3-lists/
Editor: Tab Atkins, Google, http://xanthir.com/contact/
Former Editor: Ian Hickson, Google, ian@hixie.ch
Former Editor: Tantek Çel&#x0131;&#x0307;k, Formerly of Microsoft, tantekc@microsoft.com
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/
!Issue Tracking: <a href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&component=Lists%20and%20Counters&resolution=---">Bugzilla</a>
!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 draft contains the features of CSS level&nbsp;3 relating to list styling. It includes and extends the functionality of CSS level&nbsp;2 [[!CSS21]]. The main extensions compared to level&nbsp;2 are a pseudo-element representing the list marker, and a method for authors to define their own list-styles.
</pre>
<pre class='link-defaults'>
spec:css-position-3; type:property; text:left
</pre>
<h2 id='intro'>
Introduction</h2>
<p class='issue'><strong>
This is an early-stage working draft.
None of its contents should be considered suitable for implementation at this point.
Please cross-check against CSS 2.1 before implementing anything in this specification.</strong>
This specification defines the ''::marker'' pseudo-element,
the ''list-item'' and ''inline-list-item'' 'display' values that generate markers,
and several properties controlling the placement and styling of markers.
It also defines <i>counters</i>,
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 may be used to add parentheses around each numbered list item:
<pre>
&lt;style>
li::marker { content: "(" counter(list-item, lower-roman) ")"; }
li { display: list-item; }
&lt;/style>
&lt;ol>
&lt;li>This is the first item.&lt;/li>
&lt;li>This is the second item.&lt;/li>
&lt;li>This is the third item.&lt;/li>
&lt;/ol>
</pre>
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.
<p class="issue">
A future release of this module will probably include ways to render tree lists.
<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 ''list-item'' or ''inline-list-item''.
<i>List items</i> generate ''::marker'' pseudo-elements;
no other elements do.
Additionally, <i>list items</i> automatically increment the special ''list-item'' <i>counter</i>.
Unless the 'counter-increment' property manually specifies a different increment for the ''list-item'' <i>counter</i>,
it must be incremented by 1 on every <i>list item</i>,
at the same time that <i>counters</i> are normally incremented.
(This has no effect on the values of the 'counter-*' properties.)
<pre class="propdef partial">
Name: display
New values: inline-list-item
</pre>
The <dfn value for="display">inline-list-item</dfn> display value makes the element a <i>list item</i>,
with the effects described above.
Additionally, the ''outside'' value of 'list-style-position'
computes to ''inside'' on this element.
Otherwise, this display value is treated identically to ''display/inline''.
Note: This display value is silly,
and only necessary because we haven't yet defined 'display' to be split into subproperties.
When that happens,
"being a list item" will just be a property value that can apply to block, inline, and other elements.
<!-- ====================================================================== -->
<h2 id='marker-content'>
Default Marker Contents: The 'list-style-image' and 'list-style-type' properties</h2>
The contents of a ''::marker'' pseudo-eleme F803 nt can be generated automatically,
rather than being specified explicitly with 'content'.
The 'list-style-image' and 'list-style-type' properties control how these contents are generated.
<pre class="propdef">
Name: list-style-image
Value: <<image>> | none
Initial: none
Applies to: <a>list items</a>
Inherited: yes
Percentages: n/a
Media: visual
Computed value: computed value fo the <<image>>, or ''list-style-image/none''
</pre>
The 'list-style-image' property specifies an image that will be used as the list marker's <i>default contents</i>.
The values are defined as follows:
<dl dfn-type="value" dfn-for="list-style-image">
<dt><dfn>&lt;image></dfn>
<dd>
If the <code>&lt;image></code> is not an <a href="https://www.w3.org/TR/css3-images/#invalid-image">invalid image</a>,
the image is the <i>default contents</i> of the list item's marker.
Otherwise, the <i>default contents</i> are given by 'list-style-type' instead.
<dt><dfn>none</dfn>
<dd>
The <i>default contents</i> of the of the list item's marker are given by 'list-style-type' instead.
</dl>
<div class="example">
The following example sets the marker at the beginning of each list item to
be the image "ellipse.png".
<pre>li { list-style-image: url("http://www.example.com/ellipse.png") }</pre>
</div>
<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
Media: visual
Computed value: specified value
</pre>
When the value of 'list-style-image' is ''list-style-image/none''
or an <a href="https://www.w3.org/TR/css3-images/#invalid-image">invalid image</a>,
the 'list-style-type' property is used to construct the default contents of a list item's marker;
otherwise, 'list-style-type' is ignored.
The values are defined as follows:
<dl dfn-type="value" dfn-for="list-style-type">
<dt><dfn>&lt;counter-style></dfn>
<dd>
The list item's marker's <i>default contents</i> are that counter style. [[CSS-COUNTER-STYLES-3]]
<dt><dfn>&lt;string></dfn>
<dd>
The <<string>> is used as the list item's marker's <i>default contents</i>.
<dt><dfn>none</dfn>
<dd>
The list item's marker's <i>default contents</i> are ''list-style-type/none''.
</dl>
<div class='example'>
<p>The following examples illustrate how to set markers to various values:
<pre>
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(repeating '○' '●'); }
/* 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, or the marker's contents are set explicitly via
the 'content' property. */
</pre>
</div>
<h2 id='list-style-position-property'>
Marker Position: The 'list-style-position' property</h2>
<pre class="propdef">
Name: list-style-position
Value: inside | outside
Initial: outside
Applies to: <a>list items</a>
Inherited: yes
Percentages: n/a
Media: visual
Computed value: specified value (but see prose)
</pre>
This property helps control the position of the ''::marker'' pseudo-element in the <i>list item</i>.
The values are defined as follows:
<dl dfn-type=value dfn-for=list-style-position>
<dt><dfn>inside</dfn>
<dd>
The ''::marker'' pseudo-element is an inline element placed immediately before where the ''::before'' pseudo-element would be placed in the <i>list item</i>.
<dt><dfn id='list-style-position-outside'>outside</dfn>
<dd>
As ''inside'', plus the 'position' property on the marker computes to ''marker''.
Additionally, the base directionality of the marker
(used as an input to the bidi resolution algorithm)
must be taken from the marker's <i>marker positioning reference element</i>.
If the <i>list item</i> is ''display: inline-list-item'',
this value computes to ''inside''.
</dl>
Note: Note that a marker is only generated
if the used value of the 'content' property for the ''::marker'' pseudo-element is not ''content/none''.
<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>
<h2 id='list-style-property'>
The 'list-style' shorthand property</h2>
<pre class='propdef'>
Name: list-style
Value: <<'list-style-type'>> || <<'list-style-position'>> || <<'list-style-image'>>
Initial: see individual properties
Applies to: <a>list items</a>
Inherited: see individual properties
Percentages: see individual properties
Media: visual
Computed value: see individual properties
</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>
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>
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>
<div class=example>
Although authors may specify 'list-style' information directly on list item elements
(e.g., <a element>li</a> 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 <a element>ul</a> into an <a element lt="ol">ol class=alpha</a>,
the first rule's specificity will make the <a element>ul</a>’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; } 13BD
</pre>
These are even better,
since inheritance will transfer the 'list-style' value to the list items.
</div>
<h2 id='marker-pseudo-element'>
Markers: The ''::marker'' pseudo-element</h2>
This specification defines a new type of pseudo-element,
the <dfn>::marker</dfn> pseudo-element,
which is generated by <i>list items</i> to represent the item's marker
(the bullet or number identifying each item).
Like ''::before'' and ''::after'',
the ''::marker'' pseudo-element can be styled with the full range of CSS properties and values,
exactly like a real element.
Markers are placed at the beginning of their originating element's content,
before the ''::before'' pseudo-element (if it exists).
''::marker'' pseudo-elements are inline by default,
though certain values for 'list-style-position' on the list item can make the marker box positioned,
which can have an effect on the computed value of display.
The ''::marker'' pseudo-element is only created on <i>list items</i>.
On any other element,
the ''::marker'' pseudo-element's 'content' property must compute to ''content/none'',
which suppresses its creation.
<div class="example">
In the following example,
the content is centered within a marker box of a fixed width.
This document:
<pre>
&lt;style>
li::marker {
content: "(" counter(counter) ")";
width: 6em;
text-align: center;
}
li {
display: list-item;
counter-increment: counter;
}
&lt;/style>
&lt;ol>
&lt;li>This is the first item.&lt;/li>
&lt;li>This is the second item.&lt;/li>
&lt;li>This is the third item.&lt;/li>
&lt;/ol>
</pre>
should render something like this:
<pre>
(1) This is the
first item.
(2) This is the
second item.
(3) This is the
third item.
</pre>
</div>
<div class="example">
In this example, markers are used to number paragraphs that are designated as "notes":
<pre>
&lt;style>
p { margin-left: 12 em; }
p.note {
display: list-item;
counter-increment: note-counter;
}
p.note::marker {
content: "Note " counter(note-counter) ":";
text-align: left;
width: 10em;
}
&lt;/style>
&lt;p>This is the first paragraph in this document.&lt;/p>
&lt;p class="note">This is a very short document.&lt;/p>
&lt;p>This is the end.&lt;/p>
</pre>
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 positioned much more flexibly,
and even be styled independently from the text of the list item itself:
<pre>
&lt;style>
p { margin-left: 8em } /* Make space for counters */
li { list-style-type: lower-roman; }
li::marker { margin: 0 3em 0 0; color: blue; font-weight:bold; }
&lt;/style>
&lt;p>This is a long preceding paragraph ...&lt;/p>
&lt;ol>
&lt;li>This is the first item.&lt;/li>
&lt;li>This is the second item.&lt;/li>
&lt;li>This is the third item.&lt;/li>
&lt;/ol>
&lt;p>This is a long following paragraph ...&lt;/p>
</pre>
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.
Non-inherited properties like 'margin' couldn't be adjusted at all on the marker.
</div>
<!-- ====================================================================== -->
<h3 id='content-property'>
Generating the value of the 'content' property</h3>
The ''::marker'' pseudo-element's 'content' property is set according to its <dfn>default contents</dfn>,
which are defined by the 'list-style-image' and 'list-style-type' properties:
<dl>
<dt>an <<image>>
<dd>
The computed value of the 'content' property is the computed value of the <<image>>,
followed by a string containing a single space (U+0020 SPACE).
<dt>a <<string>>
<dd>
The computed value of the 'content' property is the &lt;string>.
<dt>a <<counter-style>>
<dd>
The computed value of the 'content' property is
<code><<counter-prefix>> counter(list-item, <<counter-style>>) <<counter-suffix>></code>,
where <dfn no-export>&lt;counter-prefix></dfn> and <dfn no-export>&lt;counter-suffix></dfn> are the values of the ''@counter-style/prefix'' and ''@counter-style/suffix'' descriptors for the counter style.
<dt>''list-style-type/none''
<dd>
The computed value of the 'content' property is ''content/none''.
</dl>
If the computed value of 'content' was an <<image>>,
and it ends up resolving to an <a>invalid image</a>,
the used value of the 'content' property
is as above,
but with the <i>default contents</i> determined solely by 'list-style-type'.
<div class="example">
Given the following style sheet:
<pre>
li { display: list-item; list-style-type: decimal /* initial value */; }
li::marker { content: normal /* initial value */; }
</pre>
And the following document fragment:
<pre>&lt;li>List Item&lt;/li></pre>
The computed value of the 'content' property on the ''::marker'' pseudo-element of the <a element>li</a> is:
<pre>counter(list-item, decimal) "."</pre>
</div>
<h2 id='positioning-markers'>
Positioning Markers</h2>
<p class='issue'><strong>
This section is not ready for implementation.
It is an unreviewed rough draft that hasn't even been properly checked for Web-compatibility.
Feel free to send feedback, but DON'T USE THIS PART OF THE SPEC.</strong>
This section introduces a new positioning scheme,
designed to model the way in which ''list-style-position:outside'' list markers were traditionally positioned in CSS 2.1.
Outside list markers now have their positioning defined in terms of this new value.
The new positioning scheme defined in this section can be used on all elements,
not just ''::marker'' pseudo-elements.
For example, this can be used to position explicit elements serving as markers in a legal document,
so that the list item has a marker whose value is guaranteed to be correct regardless of whether the CSS is applied
(often a requirement in legal documents),
but which is positioned like a native CSS marker.
<h3 id='position-marker'>
The ''marker'' value for 'position'</h3>
<pre class="propdef partial">
Name: position
New values: marker
Computed value: see prose, otherwise same as normal
</pre>
The <dfn value for=position>marker</dfn> value for 'position' depends on the element it is set on having a <i>list item</i> ancestor.
If the specified value of 'position' is ''position/marker''
and the element does not have a <i>list item</i> ancestor,
'position' must compute to ''position/relative'' on the element.
An element with ''position:marker'' counts as <a href="https://www.w3.org/TR/CSS21/visuren.html#absolutely-positioned">absolutely positioned</a>.
To calculate the marker's position, we must first define a few terms:
<dl>
<dt><dfn>ancestor list item</dfn>
<dd>The <i>ancestor list item</i> is the marker's nearest list item ancestor element.
<dt><dfn>marker positioning reference element</dfn>
<dd>
If the <i>ancestor list item</i> has ''marker-side:list-item'',
the <i>marker positioning reference element</i> is the <i>ancestor list item</i>.
Otherwise, if the <i>ancestor list item</i> has ''marker-side:list-container'' and has a parent element,
the <i>marker positioning reference element</i> is the <i>ancestor list item's</i> parent.
Otherwise, the <i>marker positioning reference element</i> is the <i>ancestor list item</i>.
<dt><dfn>list item positioning edge</dfn>
<dd>
The border edge of the <i>ancestor list item</i> corresponding to the "start" or "head" edge of the <i>marker positioning reference element</i>,
whichever is in the <i>ancestor list item's</i> inline axis.
<dt><dfn>marker positioning edge</dfn>
<dd>
The outer edge of the marker that's on the opposite side from the <i>list item positioning edge</i>.
For example, if the <i>list item positioning edge</i> ended up being the left border edge of the <i>ancestor list item</i>,
the <i>marker positioning edge</i> would be the right margin edge of the marker.
</dl>
The marker's position in the <i>ancestor list item</i>’s block axis
is calculated according to the <a href="https://www.w3.org/TR/CSS21/visuren.html#normal-flow">normal flow</a>.
The marker's position in the <i>ancestor list item's</i> inline axis must be set such that
the <i>marker positioning edge</i> is flush with the <i>list item positioning edge</i>.
Note: The purpose of this somewhat convoluted definition is to position the marker flush against its list item,
and then when "marker-side:list-container",
keep all the markers for a given list on the same side of their list items even in mixed-direction text,
so that authors can specify padding on only one side of the list container and still ensure their markers are visible.
And on top of all that,
do something sane in the face of potentially differing writing-modes on the marker, list item, and container.
All elements or pseudo-elements with ''position:marker''
that share a common <i>ancestor list item</i>
are known as <dfn lt='associated-marker'>markers associated with that list item</dfn>.
6CD1 The 'top', 'right', 'bottom', and 'left' properties specify offsets
relative to the top, right, bottom, and left edges (respectively) of the element itself,
similar to how relative positioning works.
<div class='example'>
''position:marker'' can be used when the precise list marker is important for the content,
not a stylistic choice,
but the normal <em>appearance</em> of lists is still desired.
For example, this trimmed snippet of the US Code of Laws may be marked up as the following in HTML:
<pre>
&lt;style>
ol { list-style: none; }
.marker { position: marker; }
&lt;/style>
&lt;ol>
&lt;li>
&lt;span class='marker'>(a)&lt;/span> Definitions.— For purposes of this section—
&lt;ol>
&lt;li>&lt;span class='marker'>(1)&lt;/span> the term “agency” means agency as...
&lt;li>&lt;span class='marker'>(2)&lt;/span> the term “individual” means a citizen...
&lt;/ol>
&lt;li>
&lt;span class='marker'>(b)&lt;/span> Conditions of Disclosure.— No agency shall disclose...
&lt;ol>
&lt;li>&lt;span class='marker'>(1)&lt;/span> to those officers and employees of the agency...
&lt;li>&lt;span class='marker'>(2)&lt;/span> required under section 552 of this title;
&lt;/ol>
&lt;/ol>
</pre>
The preceding document should render something like this:
<pre>
(a) Definitions.— For purposes of this section—
(1) the term “agency” means agency as...
(2) the term “individual” means a citizen...
(b) Conditions of Disclosure.— No agency shall disclose...
(1) to those officers and employees of the agency...
(2) required under section 552 of this title;
</pre>
Importantly, even if the stylesheet is unavailable,
the list markers will appear the same
(though they will be positioned slightly differently),
so other documents can refer to those list markers
and be confident that the reference will always be resolvable.
</div>
<h3 id='marker-side'>
The 'marker-side' property</h3>
By default, elements or ''::marker'' pseudo-elements with ''position:marker''
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.
The 'marker-side' property defined in this section allows an author to control this,
switching list items to positioning their markers based off the list container's directionality instead.
<pre class='propdef'>
Name: marker-side
Value: list-item | list-container
Initial: list-item
Applies to: <a>list items</a>
Inherited: yes
Percentages: n/a
Media: visual
Computed value: specified value
</pre>
<dl dfn-type=value dfn-for=marker-side>
<dt><dfn>list-item</dfn>
<dd>
Any <i lt='associated-marker'>markers associated with the list item</i> base their positioning off of the directionality of the list item.
<dt><dfn>list-container</dfn>
<dd>
The <i lt='associated-marker'>associated markers</i> instead base their positioning off of the directionality of the list item's parent element.
The normative meaning of this is specified in the section defining <a href="#position-marker">position:marker</a>.
</dl>
<div class='example'>
Here is an example of the effect that 'marker-side' can have on a list.
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>
&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>list-item
<th>list-container
<tbody>
< 8096 div id="LC734" class="react-file-line html-div" data-testid="code-cell" data-line-number="734" style="position:relative"> <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>
<!-- ===================================================================== -->
<h2 id='auto-numbering'>
Automatic Numbering With Counters</h2>
A <dfn export>counter</dfn> is a special concept
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.
They are created and manipulated with the 'counter-increment', 'counter-set' and 'counter-reset' properties,
and used with the ''counter()'' and ''counters()'' functions.
Counters have a name,
an integer value,
a creator element,
and possibly another counter nested inside themselves.
<h3 id='counter-properties'>
Manipulating Counters: the 'counter-increment', 'counter-set' and 'counter-reset' properties</h2>
<pre class="propdef">
Name: counter-reset
Value: [ <<custom-ident>> <<integer>>? ]+ | none
Initial: none
Applies to: all elements
Inherited: no
Percentages: n/a
Media: all
Computed value: specified value
</pre>
The 'counter-reset' property <i lt="create a new counter">creates new counters</i> on an element.
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><<custom-ident>> <<integer>>?</dfn>
<dd>
The element <i lt="create a new counter">creates one or more new counters</i>.
Each <<custom-ident>> names a new counter to be created.
If an <<integer>> is provided after an <<custom-ident>>,
the starting value of the new counter is that integer.
Otherwise, the starting value of the new counter is ''0''.
Implementations may have implementation-specific limits
on the maximum or minimum value of a counter.
If an increment would push the counter's value beyond these limits,
the increment must be ignored,
and the counter's value remain unchanged.
</dl>
<pre class='propdef'>
Name: counter-set
Value: [ <<custom-ident>> <<integer>>? ]+ | none
Initial: none
Applies to: all elements
Inherited: no
Percentages: n/a
Media: all
Computed value: specified value
</pre>
<pre class='propdef'>
Name: counter-increment
Value: [ <<custom-ident>> <<integer>>? ]+ | none
Initial: none
Applies to: all elements
Inherited: no
Percentages: n/a
Media: all
Computed value: specified value
</pre>
The 'counter-set' and 'counter-increment' properties
manipulate the value of existing counters.
They only create 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><<custom-ident>> <<integer>>?</dfn>
<dd>
The element alters the value of one or more counters on it.
If there is not currently a counter of the given name on the element,
the element <i lt="create a new counter">creates a new counter</i> of the given name
with a starting value of ''0''
(though it may then immediately set or increment that value to something different).
If an <<integer>> is provided after an <<custom-ident>>,
it sets the innermost counter of the given name's value to that integer (for 'counter-set')
or increments the value of the innermost counter of the given name by that integer (for 'counter-increment').
Otherwise,
the innermost counter of the given name's value is set to ''0'' (for 'counter-set')
or incremented by ''1'' (for 'counter-increment').
</dl>
<div class="example">
<p>This example shows a way to number chapters and sections with "Chapter 1", "1.1", "1.2", etc.
<pre>
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>
Inheriting counters must be done <em>before</em> resetting counters,
which must be done <em>before</em> setting counters,
which must be done <em>before</em> incrementing counters,
which must be done <em>before</em> using counters
(for example, in the 'content' property).
<div class='note'>
The counter properties follow the cascading rules as normal.
Thus, due to cascading, the following style sheet:
<div class='example'>
<pre>
h1 { counter-reset: section -1 }
h1 { counter-reset: imagenum 99 }
</pre>
</div>
will only reset ''imagenum''.
To reset both counters,
they have to be specified together:
<div class='example'>
<pre>H1 { counter-reset: section -1 imagenum 99 }</pre>
</div>
The same principles apply to the 'counter-set' and 'counter-increment' properties.
</div>
<h3 id="creating-counters">
Creating and Inheriting Counters</h3>
Every element has a (possibly empty) set of counters.
Like many other CSS values,
an element can inherit counters from another element.
However, unlike other CSS values,
the method that counters are inherited is somewhat complex.
A counter and its value are inherited <em>separately</em>,
possibly from different elements.
If an element has a previous sibling,
it must inherit all of the sibling's counters.
Otherwise, if the element has a parent,
it must inherit all of the parent's counters.
Otherwise, the element must have an empty set of counters.
The element then inherits counter <em>values</em>
from the immediately preceding element <strong>in document order</strong>.
This must be done by examining the set of counters that the immediately preceding element has,
and, for every counter that exists in both the element's set and the preceding element's set,
giving the element's counter the same value.
(If an element is the first element in the document,
and thus has no immediately preceding element,
it also doesn't have a parent or a previous sibling,
and thus no counters to begin with.)
<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 "in document 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,
its the order in which the parser encounters start tags as it reads the document.
In here, the <code>&lt;ul></code> 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 <code>&lt;ul></code>,
inherits this counter.
Its parent is also its immediately preceding element in document 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 document 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: hsl(0, 80%, 40%); }
#counter-inheritance-example b.bar { color: hsl(120, 80%, 30%); }
#counter-inheritance-example b.baz { color: hsl(240, 80%, 50%); }
</style>
Elements can create additional counters on themselves,
which can then be passed onto siblings or children.
To <dfn>create a new counter</dfn>,
specify an element that's creating it,
a name,
and a starting value.
The effect depends on what other counters of that name exist on the element:
<ul>
<li>
If no counters of that name exist on the element,
create a new counter with that name on the element.
<li>
Otherwise, if a counter of that name exists on the element,
and it was created by a preceding sibling,
replace the innermost counter of that name on the element
with a newly-created counter with that name.
<li>
Otherwise, create a new counter with that name
and nest it inside of the innermost counter with that name.
</ul>
View remainder of file in raw view