Abstract
This draft contains the features of CSS level 3 relating to list styling. It includes and extends the functionality of CSS level 2 [CSS21]. The main extensions compared to level 2 are a pseudo-element representing the list marker, and a method for authors to define their own list-styles.
CSS is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, in speech, etc.
Status of this document
This section describes the status of this document at the time of
its publication. Other documents may supersede this document. A list of
current W3C publications and the latest revision of this technical report
can be found in the W3C technical reports
index at http://www.w3.org/TR/.
Publication as a Working Draft does not imply endorsement by the W3C
Membership. This is a draft document and may be updated, replaced or
obsoleted by other documents at any time. It is inappropriate to cite this
document as other than work in progress.
The (archived) public
mailing list www-style@w3.org (see
instructions) is preferred
for discussion of this specification. When sending e-mail, please put the
text “css-lists” in the subject, preferably like this:
“[css-lists] …summary of comment…”
This document was produced by the CSS Working Group (part of
the Style Activity).
This document was produced by a group operating under the 5 February
2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in
connection with the deliverables of the group; that page also includes
instructions for disclosing a patent. An individual who has actual
knowledge of a patent which the individual believes contains Essential
Claim(s) must disclose the information in accordance with section
6 of the W3C Patent Policy.
This draft retains only a part of the features of the previous
draft (24 May 2011). The rest has been separated into two other
specifications: CSS Counter Styles Level 3 and Predefined Counter Styles.
For an overview of what is new compared to CSS level 2, see the Changes section.
Table of Contents
1
Introduction
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.
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 counters,
which are special numerical objects
often used to generate the default contents of markers.
For instance, the following example illustrates how markers may be used to add parentheses around each numbered list item:
<style>
li::marker { content: "(" counter(list-item, lower-roman) ")"; }
li { display: list-item; }
</style>
<ol>
<li>This is the first item.</li>
<li>This is the second item.</li>
<li>This is the third item.</li>
</ol>
It should produce something like this:
(i) This is the first item.
(ii) This is the second item.
(iii) This is the third item.
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.
With descendant selectors and child selectors,
it’s possible to specify different marker types depending on the depth of embedded lists.
A future release of this module will probably include ways to render tree lists.
2
Declaring a List Item
A list item is any element with its display property set to list-item or inline-list-item.
List items generate ::marker pseudo-elements;
no other elements do.
Additionally, list items automatically increment the special list-item counter.
Unless the counter-increment property manually specifies a different increment for the list-item counter,
it must be incremented by 1 on every list item,
at the same time that counters are normally incremented.
(This has no effect on the values of the counter-* properties.)
| Name: | display |
|---|
| New values: | inline-list-item |
|---|
The inline-list-item display value makes the element a list item,
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 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.
The contents of a ::marker pseudo-element 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.
| Name: | list-style-image |
|---|
| Value: | <image> | none |
|---|
| Initial: | none |
|---|
| Applies to: | list items |
|---|
| Inherited: | yes |
|---|
| Media: | visual |
|---|
| Computed value: | computed value fo the <image>, or none |
|---|
| Percentages: | n/a |
|---|
The list-style-image property specifies an image that will be used as the list marker’s default contents.
The values are defined as follows:
- <image>
-
If the
<image> is not an invalid image,
the image is the default contents of the list item’s marker.
Otherwise, the default contents are given by list-style-type instead.
- none
-
The default contents of the of the list item’s marker are given by list-style-type instead.
The following example sets the marker at the beginning of each list item to
be the image "ellipse.png".
li { list-style-image: url("http://www.example.com/ellipse.png") } When the value of list-style-image is none
or an invalid image,
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:
- <counter-style>
-
The list item’s marker’s default contents are that counter style. [CSS-COUNTER-STYLES-3]
- <string>
-
The <string> is used as the list item’s marker’s default contents.
- none
-
The list item’s marker’s default contents are none.
The following examples illustrate how to set markers to various values:
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. */
| Name: | list-style-position |
|---|
| Value: | inside | outside |
|---|
| Initial: | outside |
|---|
| Applies to: | list items |
|---|
| Inherited: | yes |
|---|
| Media: | visual |
|---|
| Computed value: | specified value (but see prose) |
|---|
| Percentages: | n/a |
|---|
This property helps control the position of the ::marker pseudo-element in the list item.
The values are defined as follows:
- inside
-
The ::marker pseudo-element is an inline element placed immediately before where the ::before pseudo-element would be placed in the list item.
- outside
-
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 marker positioning reference element.
If the list item is display: inline-list-item,
this value computes to inside.
Note: Note that a marker is only generated
if the used value of the content property for the ::marker pseudo-element is not none.
For example:
<style>
ul.compact { list-style: inside; }
ul { list-style: outside; }
</style>
<ul class=compact>
<li>first "inside" list item comes first</li>
<li>second "inside" list item comes first</li>
</ul>
<hr>
<ul>
<li>first "outside" list item comes first</li>
<li>second "outside" list item comes first</li>
</ul>
The above example may be formatted as:
* first "inside" list
item comes first
* second "inside" list
item comes second
========================
* first "outside" list
item comes first
* second "outside" list
item comes second 5
The list-style shorthand property
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.
For example:
UL { list-style: upper-roman inside } /* Any UL */
UL UL { list-style: circle outside } /* Any UL child of a UL */
Using a value of none in the shorthand is potentially ambiguous,
as none is a valid value for both list-style-image and list-style-type.
To resolve this ambiguity,
a value of none in the shorthand must be applied to whichever of the two properties aren’t otherwise set by the shorthand.
list-style: none disc;
/* 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 */
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:
ol.alpha li { list-style: lower-alpha; }
ul li { list-style: disc; }
The above won’t work as expected.
If you nest a ul into an ol class=alpha,
the first rule’s specificity will make the ul’s list items use the lower-alpha style.
ol.alpha > li { list-style: lower-alpha; }
ul > li { list-style: disc; }
These work as intended.
ol.alpha { list-style: lower-alpha; }
ul { list-style: disc; }
These are even better,
since inheritance will transfer the list-style value to the list items.
6
Markers: The ::marker pseudo-element
This specification defines a new type of pseudo-element,
the ::marker pseudo-element,
which is generated by list items 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 list items.
On any other element,
the ::marker pseudo-element’s content property must compute to none,
which suppresses its creation.
In the following example,
the content is centered within a marker box of a fixed width.
This document:
<style>
li::marker {
content: "(" counter(counter) ")";
width: 6em;
text-align: center;
}
li {
display: list-item;
counter-increment: counter;
}
</style>
<ol>
<li>This is the first item.</li>
<li>This is the second item.</li>
<li>This is the third item.</li>
</ol>
should render something like this:
(1) This is the
first item.
(2) This is the
second item.
(3) This is the
third item.
In this example, markers are used to number paragraphs that are designated as "notes":
<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;
}
</style>
<p>This is the first paragraph in this document.</p>
<p class="note">This is a very short document.</p>
<p>This is the end.</p>
It should render something like this:
This is the first paragraph
in this document.
Note 1: This is a very short
document.
This is the end.
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:
<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; }
</style>
<p>This is a long preceding paragraph ...</p>
<ol>
<li>This is the first item.</li>
<li>This is the second item.</li>
<li>This is the third item.</li>
</ol>
<p>This is a long following paragraph ...</p>
The preceding document should render something like this:
This is a long preceding
paragraph ...
i. This is the first item.
ii. This is the second item.
iii. This is the third item.
This is a long following
paragraph ...
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.
6.1
Generating the value of the content property
The ::marker pseudo-element’s content property is set according to its default contents,
which are defined by the list-style-image and list-style-type properties:
- an <image>
-
The computed value of the content property is the computed value of the <image>.
- a <string>
-
The computed value of the content property is the <string>.
- a <counter-style>
-
The computed value of the content property is
<counter-prefix> counter(list-item, <counter-style>) <counter-suffix>,
where <counter-prefix> and <counter-suffix> are the values of the @counter-style/prefix and @counter-style/suffix descriptors for the counter style.
- none
-
The computed value of the content property is none.
If the computed value of content was an <image>,
and it ends up resolving to an invalid image,
the used value of the content property
is as above,
but with the default contents determined solely by list-style-type.
Given the following style sheet:
li { display: list-item; list-style-type: decimal /* initial value */; }
li::marker { content: normal /* initial value */; }
And the following document fragment:
<li>List Item</li>
The computed value of the content property on the ::marker pseudo-element of the li is:
counter(list-item, decimal) "."
7
Positioning Markers
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.
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.
| Name: | position |
|---|
| New values: | marker |
|---|
| Computed value: | see prose, otherwise same as normal |
|---|
The marker value for position depends on the element it is set on having a list item ancestor.
If the specified value of position is marker
and the element does not have a list item ancestor,
position must compute to relative on the element.
An element with position:marker counts as absolutely positioned.
To calculate the marker’s position, we must first define a few terms:
- ancestor list item
- The ancestor list item is the marker’s nearest list item ancestor element.
- marker positioning reference element
-
If the ancestor list item has marker-side:list-item,
the marker positioning reference element is the ancestor list item.
Otherwise, if the ancestor list item has marker-side:list-container and has a parent element,
the marker positioning reference element is the ancestor list item’s parent.
Otherwise, the marker positioning reference element is the ancestor list item.
- list item positioning edge
-
The border edge of the ancestor list item corresponding to the "start" or "head" edge of the marker positioning reference element,
whichever is in the ancestor list item’s inline axis.
- marker positioning edge
-
The outer edge of the marker that’s on the opposite side from the list item positioning edge.
For example, if the list item positioning edge ended up being the left border edge of the ancestor list item,
the marker positioning edge would be the right margin edge of the marker.
The marker’s position in the ancestor list item’s block axis
is calculated according to the normal flow.
The marker’s position in the ancestor list item’s inline axis must be set such that
the marker positioning edge is flush with the list item positioning edge.
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 ancestor list item
are known as markers associated with that list item.
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.
position:marker can be used when the precise list marker is important for the content,
not a stylistic choice,
but the normal
appearance 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:
<style>
ol { list-style: none; }
.marker { position: marker; }
</style>
<ol>
<li>
<span class='marker'>(a)</span> Definitions.— For purposes of this section—<ol>
<li><span class='marker'>(1)</span> the term “agency” means agency as...
<li><span class='marker'>(2)</span> the term “individual” means a citizen...
</ol>
<li>
<span class='marker'>(b)</span> Conditions of Disclosure.— No agency shall disclose...
<ol>
<li><span class='marker'>(1)</span> to those officers and employees of the agency...
<li><span class='marker'>(2)</span> required under section 552 of this title;
</ol>
</ol>
The preceding document should render something like this:
(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;
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.
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 <li>s with different "dir" attributes in an <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.
| Name: | marker-side |
|---|
| Value: | list-item | list-container |
|---|
| Initial: | list-item |
|---|
| Applies to: | list items |
|---|
| Inherited: | yes |
|---|
| Media: | visual |
|---|
| Computed value: | specified value |
|---|
| Percentages: | n/a |
|---|
- list-item
-
Any markers associated with the list item base their positioning off of the directionality of the list item.
- list-container
-
The associated markers 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 position:marker.
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:
<ul>
<li>english one
<li dir=rtl>OWT WERBEH
<li>english three
<li dir=rtl>RUOF WERBEH
</ul>
| list-item
| list-container
|
* english one
OWT WERBEH *
* english three
RUOF WERBEH * |
* english one
* OWT WERBEH
* english three
* RUOF WERBEH |
8
Automatic Numbering With Counters
A counter 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.
| Name: | counter-reset |
|---|
| Value: | [ <custom-ident> <integer>? ]+ | none |
|---|
| Initial: | none |
|---|
| Applies to: | all elements |
|---|
| Inherited: | no |
|---|
| Media: | all |
|---|
| Computed value: | specified value |
|---|
| Percentages: | n/a |
|---|
The counter-reset property creates new counters on an element.
Its values are defined as follows:
- none
-
This element does not create any new counters.
- <custom-ident> <integer>?
-
The element creates one or more new counters.
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.
| Name: | counter-set |
|---|
| Value: | [ <custom-ident> <integer>? ]+ | none |
|---|
| Initial: | none |
|---|
| Applies to: | all elements |
|---|
| Inherited: | no |
|---|
| Media: | all |
|---|
| Computed value: | specified value |
|---|
| Percentages: | n/a |
|---|
| Name: | counter-increment |
|---|
| Value: | [ <custom-ident> <integer>? ]+ | none |
|---|
| Initial: | none |
|---|
| Applies to: | all elements |
|---|
| Inherited: | no |
|---|
| Media: | all |
|---|
| Computed value: | specified value |
|---|
| Percentages: | n/a |
|---|
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:
- none
-
This element does not alter the value of any counters.
- <custom-ident> <integer>?
-
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 creates a new counter 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).
This example shows a way to number chapters and sections with "Chapter 1", "1.1", "1.2", etc.
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;
}
Inheriting counters must be done before resetting counters,
which must be done before setting counters,
which must be done before incrementing counters,
which must be done before using counters
(for example, in the content property).
The counter properties follow the cascading rules as normal.
Thus, due to cascading, the following style sheet:
h1 { counter-reset: section -1 }
h1 { counter-reset: imagenum 99 }
will only reset imagenum.
To reset both counters,
they have to be specified together:
H1 { counter-reset: section -1 imagenum 99 }
The same principles apply to the counter-set and counter-increment properties.
8.2
Creating and Inheriting Counters
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 separately,
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 values
from the immediately preceding element in document order.
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.)
Take the following code as an example:
<ul style='counter-reset: example 0;'>
<li id='foo' style='counter-increment: example;'>
foo
<div id='bar' style='counter-increment: example;'>bar</div>
</li>
<li id='baz'>
baz
</li>
</ul>
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 <ul> element establishes a new counter named "example",
and sets its value to 0.
The "foo" element, being the first child of the <ul>,
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 "bar" element.
It inherits the "example" counter from "foo",
and inherits the value 1 from it as well
and increments it to 2.
However, the "baz" element is a bit different.
It inherits the "example" counter from the "foo" element,
its previous sibling.
However, rather than inheriting the value 1 from "foo" along with the counter,
in inherits the value 2 from "bar", 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.
Elements can create additional counters on themselves,
which can then be passed onto siblings or children.
To create a new counter,
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:
-
If no counters of that name exist on the element,
create a new counter with that name on the element.
-
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.
-
Otherwise, create a new counter with that name
and nest it inside of the innermost counter with that name.
Regardless, the value of the new counter is set to the provided starting value.
8.3
Nested Counters
Counters are "self-nesting";
creating a new counter in an element
which already has a counter with the same name
simply 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.
As explained in a later section,
the counter() function only uses the innermost counter of a given name on the element,
but the counters() function uses all counters of a given name that contain the element.
Thus, the following suffices to number nested list items.
The result is very similar to that of setting
display:list-item and
list-style: inside on the LI element:
ol { counter-reset: item }
li { display: block }
li::before { content: counter(item) ". "; counter-increment: item }
In this example,
an ol will create a counter,
and all children of the ol will refer to that counter.
If we denote the nth instance of the "item" counter by item[n],
then the following HTML fragment will use the indicated counters.
(We assume the style sheet as given in the example above).
<ol> item[0] is created, set to 0
<li> item[0] is incremented to 1
<li> item[0] is incremented to 2
<ol> item[1] is created, set to 0, nested in item[0]
<li> item[1] is incremented to 1
<li> item[1] is incremented to 2
<li> item[1] is incremented to 3
<ol> item[2] is created, set to 0, nested in item[1]
<li> item[2] is incremented to 1
<li> item[1] is incremented to 4
<ol> item[3] is created, set to 0, nested in item[1]
<li> item[3] is incremented to 1
<li> item[1] is incremented to 5
<li> item[0] is incremented to 3
<li> item[0] is incremented to 4
<ol> item[4] is created, set to 0
<li> item[4] is incremented to 1
<li> item[4] is incremented to 2
8.4
Counters in elements that do not generate boxes
An element that does not generate a box
(for example, an element with display set to none, or a pseudo-element with content set to none)
cannot set, reset, or increment a counter.
The counter properties are still valid on such an element,
but they must have no effect.
For example, with the following style sheet,
H2s with class "secret" do not increment
count2.
h2 { counter-increment: count2; }
h2.secret { display: none; }
Other methods of "hiding" elements,
such as setting visibility to hidden,
still cause the element to generate a box,
and so do not apply here.
9
Printing Counters: the counter() and counters() functions
Counters have no visible effect by themselves,
but their values can be used with the counter() and counters() functions.
This happens automatically in the default contents of ::marker pseudo-elements,
but can be used by an author anywhere that accepts a string. Their syntax is:
counter() = counter( <ident> [, [ <counter-style> | none ] ]? )
counters() = counters( <ident>, <string> [, [ <counter-style> | none ] ]? )
For both functions, the first argument represents the name of a counter,
and if the last argument is omitted it defaults to decimal.
A counter() represents a <string>,
obtained as follows:
-
If the second argument to the function is none,
the function represents the empty string.
-
Otherwise, the function represents the string returned when one generates a counter representation
for the value of the innermost counter of that name on the element
(or 0 if the element has no counter of that name)
using the <counter-style> specified by the second argument.
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 */
A counters() represents a <string>,
obtained as follows:
-
If the third argument to the function is none,
the function represents the empty string.
-
Otherwise, if the element has no counters of that name,
the function represents the string returned when one generates a counter representation
for 0
using the <counter-style> specified by the third argument.
-
Otherwise, if the element has a single counter of that name,
the function represents the string returned when one generates a counter representation
for that counter’s value
using the <counter-style> specified by the third argument.
-
Otherwise,
generate a counter representation
for the values of all counters of the given name on the element
using the <counter-style> specified by the third argument.
Sort the resulting strings by the nesting depth of the counters they were generated from,
with the outermost counter first and the innermost last.
Join the list into a single string,
inserting the <string> specified by the second argument between each item in the list.
The function represents the string thus produced.
The following example shows a simple use of the
counters() function:
<ul>
<li>one</li>
<li>two
<ul>
<li>nested one</li>
<li>nested two</li>
</ul>
</li>
<li>three</li>
</ul>
<style>
ul { counter-reset: list-item; }
li { counter-increment: list-item; }
li::marker { content: '(' counters(list-item,'.') ') '; }
</style>
The preceding document should render something like this:
(1) one
(2) two
(2.1) nested one
(2.2) nested two
(3) three
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:
<h1>First H1</h1>
...
<h2>First H2 in H1</h2>
...
<h2>Second H2 in H1</h2>
...
<h3>First H3 in H2</h3>
...
<h1>Second H1</h1>
...
<h2>First H2 in H1</h2>
...
<style>
body { counter-reset: h1 h2 h3; }
h1 { counter-increment: h1; counter-reset: h2 h3;}
h2 { counter-increment: h2; counter-reset: h3; }
h3 { counter-increment: h3; }
h1::before { content: counter(h1,upper-alpha) ' '; }
h2::before { content: counter(h1,upper-alpha) '.'
counter(h2,decimal) ' '; }
h3::before { content: counter(h1,upper-alpha) '.'
counter(h2,decimal) '.'
counter(h3,lower-roman) ' '; }
</style>
The preceding document should render something like this:
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
...
10
Sample style sheet for HTML
This section is informative, not normative.
HTML itself defines the actual default properties that apply to HTML lists.
/* Set up list items */
li {
display: list-item;
/* counter-increment: list-item; (implied by display: list-item) */
}
/* Set up ol and ul so that they reset the list-item counter */
ol, ul {
counter-reset: list-item;
}
/* Default list style types for ordered lists */
ol {
list-style-type: decimal;
}
/* Default list style types for unordered lists up to 3 deep */
ul { list-style-type: disc; }
ul ul { list-style-type: square; }
ul ul ul { list-style-type: circle; }
/* Alternately, if Values & Units Level 3 is supported, replace
the above three lines with: */
ul { list-style-type: disc; }
ul ul { list-style-type: cycle(disc, square, circle); }
/* 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 attr(start integer, 1);
counter-increment: list-item -1;
}
/* The value attribute on li elements */
li[value] {
counter-set: list-item attr(value integer, 1);
counter-increment: none; /* Turn off default increase */
}
/* Handling reversed lists */
ol[reversed] {
counter-reset: list-item attr(start integer, **magic**);
/* Where **magic** is the number of child <li> elements. */
counter-increment: list-item -1;
}
ol[reversed] > li {
counter-increment: list-item -1;
}
/* Box Model Rules */
ol, ul {
display: block;
margin: 1em 0;
marker-side: list-container;
}
ol:dir(ltr), ul:dir(ltr) {
padding-left: 40px;
}
ol:dir(rtl), ul:dir(rtl) {
padding-right: 40px;
}
ol ol, ol ul, ul ul, ul ol {
margin-top: 0;
margin-bottom: 0;
}
li {
text-align: match-parent;
}
li::marker {
display: inline;
text-align: end;
unicode-bidi: isolate;
/* 'position' computes to "static" or "marker" depending on list-style-position */
}
li:dir(ltr)::marker {
margin-right: 1em;
}
li:dir(rtl)::marker {
margin-left: 1em;
}
Acknowledgments
The following people and documentation they wrote were very useful
for defining the numbering systems:
Alexander Savenkov,
Arron Eicholz,
Aryeh Gregor,
Frank Tang,
Jonathan Rosenne,
Karl Ove Hufthammer,
Musheg Arakelyan,
Nariné Renard Karapetyan,
Randall Bart,
Richard Ishida,
Simon Montagu (Mozilla, smontagu@smontagu.org)
Changes From CSS2.1
As described in the introduction section, there are significant changes in this module when
compared to CSS2.1.
- The ::marker pseudo-element has been introduced to allow styling of the list marker directly.
- The marker value for position has been added, to allow elements in the document to position themselves similarly to how markers do.
- Many new list style types have been added, along with explicit algorithms for each.
- The list-item predefined counter identifier has been introduced.
Document conventions
Conformance requirements are expressed with a combination of
descriptive assertions and RFC 2119 terminology. The key words "MUST",
"MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT",
"RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this
document are to be interpreted as described in RFC 2119.
However, for readability, these words do not appear in all uppercase
letters in this specification.
All of the text of this specification is normative except sections
explicitly marked as non-normative, examples, and notes. [RFC2119]
Examples in this specification are introduced with the words "for example"
or are set apart from the normative text with class="example",
like this:
This is an example of an informative example.
Informative notes begin with the word "Note" and are set apart from the
normative text with class="note", like this:
Note, this is an informative note.
Conformance to this specification
is defined for three conformance classes:
- style sheet
- A CSS
style sheet.
- renderer
- A UA
that interprets the semantics of a style sheet and renders
documents that use them.
- authoring tool
- A UA
that writes a style sheet.
A style sheet is conformant to this specification
if all of its statements that use syntax defined in this module are valid
according to the generic CSS grammar and the individual grammars of each
feature defined in this module.
A renderer is conformant to this specification
if, in addition to interpreting the style sheet as defined by the
appropriate specifications, it supports all the features defined
by this specification by parsing them correctly
and rendering the document accordingly. However, the inability of a
UA to correctly render a document due to limitations of the device
does not make the UA non-conformant. (For example, a UA is not
required to render color on a monochrome monitor.)
An authoring tool is conformant to this specification
if it writes style sheets that are syntactically correct according to the
generic CSS grammar and the individual grammars of each feature in
this module, and meet all other conformance requirements of style sheets
as described in this module.
Partial implementations
So that authors can exploit the forward-compatible parsing rules to
assign fallback values, CSS renderers must
treat as invalid (and ignore
as appropriate) any at-rules, properties, property values, keywords,
and other syntactic constructs for which they have no usable level of
support. In particular, user agents must not selectively
ignore unsupported component values and honor supported values in a single
multi-value property declaration: if any value is considered invalid
(as unsupported values must be), CSS requires that the entire declaration
be ignored.
Experimental implementations
To avoid clashes with future CSS features, the CSS2.1 specification
reserves a prefixed
syntax for proprietary and experimental extensions to CSS.
Prior to a specification reaching the Candidate Recommendation stage
in the W3C process, all implementations of a CSS feature are considered
experimental. The CSS Working Group recommends that implementations
use a vendor-prefixed syntax for such features, including those in
W3C Working Drafts. This avoids incompatibilities with future changes
in the draft.
Non-experimental implementations
Once a specification reaches the Candidate Recommendation stage,
non-experimental implementations are possible, and implementors should
release an unprefixed implementation of any CR-level feature they
can demonstrate to be correctly implemented according to spec.
To establish and maintain the interoperability of CSS across
implementations, the CSS Working Group requests that non-experimental
CSS renderers submit an implementation report (and, if necessary, the
testcases used for that implementation report) to the W3C before
releasing an unprefixed implementation of any CSS features. Testcases
submitted to W3C are subject to review and correction by the CSS
Working Group.
Further information on submitting testcases and implementation reports
can be found from on the CSS Working Group’s website at
http://www.w3.org/Style/CSS/Test/.
Questions should be directed to the
public-css-testsuite@w3.org
mailing list.
References
Normative References
Index
- ancestor list item, 7.1
- associated-marker, 7.1
- counter(), 9
- counter, 8
- counter-increment, 8.1
- <counter-prefix>, 6.1
- counter-reset, 8.1
- counters(), 9
- counter-set, 8.1
- <counter-style>, 3
- <counter-suffix>, 6.1
- create a new counter, 8.2
- <custom-ident> <integer>?
- value for counter-reset, 8.1
- value for counter-set, counter-increment, 8.1
- default contents, 6.1
- <image>, 3
- inline-list-item, 2
- inside, 4
- list-container, 7.2
- list item, 2
- list-item, 7.2
- list item positioning edge, 7.1
- list-style, 5
- list-style-image, 3
- list-style-position, 4
- list-style-type, 3
- marker, 7.1
- ::marker, 6
- marker positioning edge, 7.1
- marker positioning reference element, 7.1
- marker-side, 7.2
- none
- value for list-style-image, 3
- value for list-style-type, 3
- value for counter-reset, 8.1
- value for counter-set, counter-increment, 8.1
- outside, 4
- <string>, 3
Property index
| Name | Value | Initial | Applies to | Inh. | %ages | Media | Computed value |
|---|
| list-style-image | <image> | none | none | list items | yes | n/a | visual | computed value fo the <image>, or none
|
|---|
| list-style-type | <counter-style> | <string> | none | disc | list items | yes | n/a | visual | specified value
|
|---|
| list-style-position | inside | outside | outside | list items | yes | n/a | visual | specified value (but see prose)
|
|---|
| list-style | <‘list-style-type’> || <‘list-style-position’> || <‘list-style-image’> | see individual properties | list items | see individual properties | see individual properties | visual | see individual properties
|
|---|
| marker-side | list-item | list-container | list-item | list items | yes | n/a | visual | specified value
|
|---|
| counter-reset | [ <custom-ident> <integer>? ]+ | none | none | all elements | no | n/a | all | specified value
|
|---|
| counter-set | [ <custom-ident> <integer>? ]+ | none | none | all elements | no | n/a | all | specified value
|
|---|
| counter-increment | [ <custom-ident> <integer>? ]+ | none | none | all elements | no | n/a | all | specified value |
|---|
Issues Index
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.
↵
A future release of this module will probably include ways to render tree lists.
↵
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.
↵