CSS Lists Module Level 3

1. Introduction

This specification defines the ::marker pseudo-element, the list-item display type that generates 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.

<style>
li::marker { content: "(" counter(list-item, lower-roman) ")"; }
li { display: list-item; }
</style>
<ol>
  <li>This is the first item.
  <li>This is the second item.
  <li>This is the third item.
</ol>

  (i) This is the first item.
 (ii) This is the second item.
(iii) This is the third item.

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

2. Declaring a List Item

A list item is any element with its display property set to list-item. List items generate ::marker pseudo-elements; no other elements do. Additionally, list items automatically increment an implied list-item counter (see §4.2 The Implicit list-item Counter).

3. Markers

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

3.1. The ::marker Pseudo-Element

The marker box is generated by the ::marker pseudo-element of a list item as the list item’s first child, before the ::before pseudo-element (if it exists on the element). It is filled with content as defined in §3.2 Generating Marker Contents.

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

Only a limited set of properties can be used on the ::marker pseudo-element. This list is defined in CSS Pseudo-Elements 4 §4.2 List Markers: the ::marker pseudo-element.

<style>
p { margin-left: 12 em; }
p.note {
  display: list-item;
  counter-increment: note-counter;
}
p.note::marker {
  content: "Note " counter(note-counter) ":";
}
</style>
<p>This is the first paragraph in this document.
<p class="note">This is a very short document.
<p>This is the end.

        This is the first paragraph
        in this document.

Note 1: This is a very short
        document.

        This is the end.

<style>
p { margin-left: 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 ...

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

3.2. Generating Marker Contents

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

content on the ::marker itself is not normal

The contents of the marker box are determined as defined by the content property, exactly as for ::before.

list-style-image on the originating element defines a marker image

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

list-style-type on the originating element defines a marker string

The marker box contains a text run consisting of the specified marker string.

otherwise

The marker box has no contents and ::marker does not generate a box.

3.3. Image Markers: the list-style-image property

Specifies the marker image, which is used to fill the list item’s marker when its content is normal. The values are as follows:

<image>

If the <image> represents a valid image, specifies the element’s marker image as the <image>. Otherwise, the element has no marker image.

none

The element has no marker image.

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

3.4. Text-based Markers: the list-style-type property

Specifies the marker string, which is used to fill the list item’s marker when its content value is normal and there is no marker image. The values are as follows:

<counter-style>

Specifies the element’s marker string as the value of the list-item counter represented using the specified <counter-style>.

Specifically, the marker string is the result of generating a counter representation of the list-item counter value using the specified <counter-style>, prefixed by the prefix of the <counter-style>, and followed by the suffix of the <counter-style>. If the specified <counter-style> does not exist, decimal is assumed.

<string>

The element’s marker string is the specified <string>.

none

The element has no marker string.

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

3.5. Positioning Markers: The list-style-position property

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

inside

No special effect. (The ::marker is an inline element at the start of the list item’s contents.)

outside

If the list item is a block container: the marker box is outside the principal block box; however, the position of the list-item marker adjacent to floats is undefined. CSS does not specify the precise location of the marker box or its position in the painting order, but does require that it be placed on the inline-start side of the box, using the writing mode of the box indicated by marker-side. The marker box is fixed with respect to the principal block box’s border and does not scroll with the principal box’s content. A UA may hide the marker if the element’s overflow is other than visible. (This allowance may change in the future.) The size or contents of the marker box may affect the height of the principal block box and/or the height of its first line box, and in some cases may cause the creation of a new line box; this interaction is also not defined.

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

If the list item is an inline box: this value is equivalent to inside.

Alternatively, outside could lay out the marker as a previous sibling of the principal inline box.

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

  * first "inside" list
  item comes first
  * second "inside" list
  item comes second

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

* first "outside" list
  item comes first
* second "outside" list
  item comes second

3.6. Styling Markers: 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.

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

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

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

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

3.7. The marker-side property

The marker-side property specifies whether the ::marker is positioned based on the directionality of the list item itself (i.e. its originating element) or the directionality of the list container (i.e. the originating element’s parent). In the first case, the position of the marker can vary across items in the same list, based on the directionality assigned to each list item individually; in the second case they will all align on the same side, as determined by the directionality assigned to the list as a whole.

match-self

The ::marker pseudo-element is positioned using the directionality of the ::marker’s originating element.

match-parent

The ::marker pseudo-element is positioned using the directionality of the ::marker’s originating element’s parent element.

<ul>
  <li>english one
  <li dir=rtl>OWT WERBEH
  <li>english three
  <li dir=rtl>RUOF WERBEH
</ul>

* english one
     OWT WERBEH *
* english three
    RUOF WERBEH *

* english one
*    OWT WERBEH
* english three
*   RUOF WERBEH

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

This section is not fully synchronized with CSS2. Please reference Automatic Counters and Numbering in CSS Level 2: any conflicts or omissions here should be resolved in favor of the behavior specified in CSS2.

4.1. Manipulating Counters: the counter-increment, counter-set and counter-reset properties

User Agents are expected to support this property on all media, including non-visual ones.

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.

User Agents are expected to support this property on all media, including non-visual ones.

User Agents are expected to support this property on all media, including non-visual ones.

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

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 incrementing counters, which must be done before setting counters, which must be done before using counters (for example, in the content property).

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

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

4.2. The Implicit list-item Counter

List items automatically increment a special list-item counter. 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, at the same time that counters are normally incremented. (This has no effect on the computed values of the counter-* properties.)

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

2. First Item
4. Second Item
6. Third Item

More definition. See old WG discussions and newer issue discussion.

UAs and host languages should ensure that the list-item counter values 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. Not really sure how to word this requirement, but the following example is expected to work.

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

1. First top-level item
5. Second top-level item, value=5
   5.3. First second-level item, list start=3
   5.4. Second second-level item, list start=3
        5.4.4. First third-level item in reversed list
        5.4.3. Second third-level item in reversed list
        5.4.2. Third third-level item in reversed list
        5.4.1. Fourth third-level item in reversed list
   5.5. Third second-level item, list start=3
6. Third top-level item

<ol>
  <li>First top-level item
  <li value=5>Second top-level item, value=5
    <ol start=3>
      <li>First second-level item, list start=3
      <li>Second second-level item, list start=3
         <ol reversed>
           <li>First third-level item in reversed list
           <li>Second third-level item in reversed list
           <li>Third third-level item in reversed list
           <li>Fourth third-level item in reversed list
         </ol>
      <li>Third second-level item, list start=3
  <li>Third top-level item
</ol>

4.3. 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.)

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

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.

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

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

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

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.

4.6. Outputting 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, which represent the counter values as strings or images. Their syntax is:

<counter> = <counter()> | <counters()>
counter()  =  counter( <custom-ident>, [ <counter-style> | none ]? )
counters() = counters( <custom-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.

The used value of counter() is 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 */

The used value of counters() is 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.

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

(1) one
(2) two
   (2.1) nested one
   (2.2) nested two
(3) three

<h1>First H1</h1>
...
<h2>First H2 in H1</h2>
...
<h2>Second H2 in H1</h2>
...
<h3>First H3 in H2</h3>
...
<h1>Second H1</h1>
...
<h2>First H2 in H1</h2>
...
<style>
body { counter-reset: h1 h2 h3; }
h1   { counter-increment: h1; counter-reset: h2 h3;}
h2   { counter-increment: h2; counter-reset:    h3; }
h3   { counter-increment: h3; }
h1::before { content: counter(h1,upper-alpha) ' '; }
h2::before { content: counter(h1,upper-alpha) '.'
                      counter(h2,decimal) ' '; }
h3::before { content: counter(h1,upper-alpha) '.'
                      counter(h2,decimal) '.'
                      counter(h3,lower-roman) ' '; }
</style>

A First H1
...
A.1 First H2 in H1
...
A.2 Second H2 in H1
...
A.2.i First H3 in H2
...
B Second H1
...
B.1 First H2 in H1
...

5. Appendix A: 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 calc(attr(start integer, 1) - 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 calc(attr(start integer, **magic**) + 1);
  /* Where **magic** is the number of child <li> elements. */
}
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 {
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

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

This section documents the changes since previous publications.

Changes since the 20 March 2014 WD

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

Changes From CSS Level 2

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

1. The ::marker pseudo-element has been introduced to allow styling of the list marker directly.
2. list-style-type now accepts a <string> as well as the extended <counter-style> values from [css-counter-styles-3]..
3. The list-item predefined counter identifier has been introduced.
4. The counter-set property has been added.
5. Allowed for inline-level list items, as introduced in [css-display-3].