Shortname: css-lists Level: 3 Group: CSSWG Status: ED ED: http://dev.w3.org/csswg/css3-lists/ TR: http://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ı̇k, Formerly of Microsoft, tantekc@microsoft.com Previous Version: http://www.w3.org/TR/2011/WD-css3-lists-20110524/ !Issue Tracking: Bugzilla !Contributors: Simon Montagu, AOL-TW/Netscape, smontagu@netscape.com !Contributors: Daniel Yacob, yacob@geez.org !Contributors: Christopher Hoess, choess@stwing.upenn.edu !Contributors: Daniel Glazman, AOL-TW/Netscape, glazman@netscape.com 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.
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.
<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.
A future release of this module will probably include ways to render tree lists.
Name: display New values: inline-list-itemThe 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.
Name: list-style-image Value: <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:> | none Initial: none Applies to: list items Inherited: yes Percentages: n/a Media: visual Computed value: computed value fo the < >, or ''list-style-image/none''
<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.
li { list-style-image: url("http://www.example.com/ellipse.png") }
Name: list-style-type Value: <When the value of 'list-style-image' is ''list-style-image/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:> | < > | none Initial: disc Applies to: list items Inherited: yes Percentages: n/a Media: visual Computed value: specified value
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 Percentages: n/a Media: visual Computed value: specified value (but see prose)This property helps control the position of the ''::marker'' pseudo-element in the list item. The values are defined as follows:
<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
Name: list-style Value: <<'list-style-type'>> || <<'list-style-position'>> || <<'list-style-image'>> Initial: see individual properties Applies to: list items Inherited: see individual properties Percentages: see individual properties Media: visual Computed value: see individual propertiesThe '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 */
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; }
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.
<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.
<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.
<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.
<> counter(list-item, <>) <> ,
where <counter-prefix> and <counter-suffix> are the values of the ''@counter-style/prefix'' and ''@counter-style/suffix'' descriptors for the counter style.
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) "."
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 normalThe marker value for 'position' depends on the element it is set on having a list item ancestor. If the specified value of 'position' is ''position/marker'' and the element does not have a list item ancestor, 'position' must compute to ''position/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:
<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.
Name: marker-side Value: list-item | list-container Initial: list-item Applies to: list items Inherited: yes Percentages: n/a Media: visual Computed value: specified value
<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 |
Name: counter-reset Value: [ <The 'counter-reset' property creates new counters on an element. Its values are defined as follows:> < >? ]+ | none Initial: none Applies to: all elements Inherited: no Percentages: n/a Media: all Computed value: specified value
Name: counter-set Value: [ <> < >? ]+ | none Initial: none Applies to: all elements Inherited: no Percentages: n/a Media: all Computed value: specified value
Name: counter-increment Value: [ <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 Initial: none Applies to: all elements Inherited: no Percentages: n/a Media: all Computed value: specified value
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;
}
h1 { counter-reset: section -1 }
h1 { counter-reset: imagenum 99 }
H1 { counter-reset: section -1 imagenum 99 }
<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.
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.
<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
h2 { counter-increment: count2; }
h2.secret { display: none; }
counter() = counter( <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 <> [, [ < > | none ] ]? ) counters() = counters( < >, < > [, [ < > | none ] ]? )
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 */
<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
<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 ...
/* 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 {
display: inline;
text-align: end;
unicode-bidi: isolate;
/* 'position' computes to "static" or "marker" depending on list-style-position */
}
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)
As described in the introduction section, there are significant changes in this module when compared to CSS2.1.