8000 csswg-drafts/css-lists/Overview.html at ac97adde3ba2e2544eda9b0298aac6974135624c · w3c/csswg-drafts · GitHub
Skip to content

Overview.html

Latest commit

 

History

History
executable file
·
1617 lines (1309 loc) · 106 KB

Overview.html

File metadata and controls

executable file
·
1617 lines (1309 loc) · 106 KB
<!DOCTYPE html><html lang=en><head>
<meta content="text/html; charset=utf-8" http-equiv=Content-Type>
<title>CSS Lists and Counters Module Level 3</title>
<link href=../default.css rel=stylesheet type=text/css>
<link href=../csslogo.ico rel="shortcut icon" type=image/x-icon>
<style>
body {
background: url("https://www.w3.org/StyleSheets/TR/logo-ED") top left no-repeat white;
background-attachment: fixed;
color: black;
font-family: sans-serif;
margin: 0 auto;
max-width: 50em;
padding: 2em 1em 2em 70px;
}
:link { color: #00C; background: transparent }
:visited { color: #609; background: transparent }
a[href]:active { color: #C00; background: transparent }
a[href]:hover { background: #ffa }
a[href] img { border-style: none }
h1, h2, h3, h4, h5, h6 { text-align: left }
h1, h2, h3 { color: #005A9C; }
h1 { font: 170% sans-serif }
h2 { font: 140% sans-serif }
h3 { font: 120% sans-serif }
h4 { font: bold 100% sans-serif }
h5 { font: italic 100% sans-serif }
h6 { font: small-caps 100% sans-serif }
.hide { display: none }
div.head { margin-bottom: 1em }
div.head h1 { margin-top: 2em; clear: both }
div.head table { margin-left: 2em; margin-top: 2em }
p.copyright { font-size: small }
p.copyright small { font-size: small }
pre { margin-left: 2em }
dt { font-weight: bold }
ul.toc, ol.toc {
list-style: none;
}
</style>
<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>
<style>
#counter-nesting-example .ol { background: rgba(0,0,0,.1); margin: .5em 0; padding: .2em .5em; }
#counter-nesting-example .li > .ol { margin: 0 0 0 1em; }
#counter-nesting-example .li { list-style: none; margin-left: 1em;}
</style>
</head>
<body class=h-entry>
<div class=head>
<p data-fill-with=logo><a class=logo href=http://www.w3.org/>
<img alt=W3C height=48 src=https://www.w3.org/Icons/w3c_home width=72>
</a>
</p>
<h1 class="p-name no-ref" id=title>CSS Lists and Counters Module Level 3</h1>
<h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
<span class=dt-updated><span class=value-title title=20140609>9 June 2014</span></span></span></h2>
<div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css3-lists/>http://dev.w3.org/csswg/css3-lists/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css3-lists/>http://www.w3.org/TR/css3-lists/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css3-lists/>http://dev.w3.org/csswg/css3-lists/</a><dt>Previous Versions:<dd><a href=http://www.w3.org/TR/2011/WD-css3-lists-20110524/ rel=previous>http://www.w3.org/TR/2011/WD-css3-lists-20110524/</a>
<dt>Feedback:</dt>
<dd><a href="mailto:www-style@w3.org?subject=%5Bcss-lists%5D%20feedback">www-style@w3.org</a>
with subject line
“<kbd>[css-lists] <var>… message topic …</var></kbd>”(<a href=http://lists.w3.org/Archives/Public/www-style/ rel=discussion>archives</a>)<dt>Test Suite:<dd>None Yet<dt>Editors:
<dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://xanthir.com/contact/>Tab Atkins</a> (<span class="p-org org">Google</span>)<dt>Former Editors:
<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:ian@hixie.ch>Ian Hickson</a> (<span class="p-org org">Google</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:tantekc@microsoft.com>Tantek Çelı̇k</a> (<span class="p-org org">Formerly of Microsoft</span>)<dt>Contributors:<dd>Simon Montagu, AOL-TW/Netscape, <a href=mailto:smontagu@netscape.com>smontagu@netscape.com</a><dd>Daniel Yacob, <a href=mailto:yacob@geez.org>yacob@geez.org</a><dd>Christopher Hoess, <a href=mailto:choess@stwing.upenn.edu>choess@stwing.upenn.edu</a><dd>Daniel Glazman, AOL-TW/Netscape, <a href=mailto:glazman@netscape.com>glazman@netscape.com</a><dt>Issue Tracking:<dd><a href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&amp;component=Lists%20and%20Counters&amp;resolution=---">Bugzilla</a></dl></div>
<div data-fill-with=warning></div>
<p class=copyright data-fill-with=copyright><a href=http://www.w3.org/Consortium/Legal/ipr-notice#Copyright>Copyright</a> © 2014 <a href=http://www.w3.org/><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href=http://www.csail.mit.edu/><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href=http://www.ercim.eu/><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href=http://www.keio.ac.jp/>Keio</a>, <a href=http://ev.buaa.edu.cn/>Beihang</a>), All Rights Reserved. W3C <a href=http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer>liability</a>, <a href=http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks>trademark</a> and <a href=http://www.w3.org/Consortium/Legal/copyright-documents>document use</a> rules apply.
</p>
<hr title="Separator for header">
</div>
<h2 class="no-num no-toc no-ref heading settled heading" id=abstract><span class=content>Abstract</span></h2>
<p class=p-summary data-fill-with=abstract>This draft contains the features of CSS level 3 relating to list styling. It includes and extends the functionality of CSS level 2 <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-css21>[CSS21]</a>. 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.
<a href=http://www.w3.org/TR/CSS/>CSS</a> is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, in speech, etc.</p>
<h2 class="no-num no-toc no-ref heading settled heading" id=status><span class=content>Status of this document</span></h2>
<div data-fill-with=status><p>
This is a public copy of the editors’ draft.
It is provided for discussion only and may change at any moment.
Its publication here does not imply endorsement of its contents by W3C.
Don’t cite this document other than as work in progress.
<p>
The (<a href=http://lists.w3.org/Archives/Public/www-style/>archived</a>) public mailing list
<a href="mailto:www-style@w3.org?Subject=%5Bcss-lists%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a>
(see <a href=http://www.w3.org/Mail/Request>instructions</a>)
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] <em>…summary of comment…</em>”
<p>
This document was produced by the <a href=http://www.w3.org/Style/CSS/members>CSS Working Group</a>
(part of the <a href=http://www.w3.org/Style/>Style Activity</a>).
<p>
This document was produced by a group operating under
the <a href=http://www.w3.org/Consortium/Patent-Policy-20040205/>5 February 2004 W3C Patent Policy</a>.
W3C maintains a <a href=http://www.w3.org/2004/01/pp-impl/32061/status rel=disclosure>public list of any patent disclosures</a>
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 <a href=http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential>Essential Claim(s)</a>
must disclose the information in accordance with <a href=http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure>section 6 of the W3C Patent Policy</a>.</div>
<div data-fill-with=at-risk></div>
<h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class=content>Table of Contents</span></h2>
<div data-fill-with=table-of-contents><ul class=toc>
<li><a href=#intro><span class=secno>1</span> Introduction</a>
<li><a href=#declaring-a-list-item><span class=secno>2</span> Declaring a List Item</a>
<li><a href=#marker-content><span class=secno>3</span> Default Marker Contents: The <span class=property data-link-type=propdesc title=list-style-image>list-style-image</span> and <span class=property data-link-type=propdesc title=list-style-type>list-style-type</span> properties</a>
<li><a href=#list-style-position-property><span class=secno>4</span> Marker Position: The <span class=property data-link-type=propdesc title=list-style-position>list-style-position</span> property</a>
<li><a href=#list-style-property><span class=secno>5</span> The <span class=property data-link-type=propdesc title=list-style>list-style</span> shorthand property</a>
<li><a href=#marker-pseudo-element><span class=secno>6</span> Markers: The <span class=css data-link-type=maybe title=::marker>::marker</span> pseudo-element</a>
<ul class=toc>
<li><a href=#content-property><span class=secno>6.1</span> Generating the value of the <span class=property data-link-type=propdesc title=content>content</span> property</a></ul>
<li><a href=#positioning-markers><span class=secno>7</span> Positioning Markers</a>
<ul class=toc>
<li><a href=#position-marker><span class=secno>7.1</span> The <span class=css data-link-type=maybe title=marker>marker</span> value for <span class=property data-link-type=propdesc title=position>position</span></a>
<li><a href=#marker-side><span class=secno>7.2</span> The <span class=property data-link-type=propdesc title=marker-side>marker-side</span> property</a></ul>
<li><a href=#counter><span class=secno>8</span> Automatic Numbering With Counters</a>
<ul class=toc>
<li><a href=#counter-properties><span class=secno>8.1</span> Manipulating Counters: the <span class=property data-link-type=propdesc title=counter-increment>counter-increment</span>, <span class=property data-link-type=propdesc title=counter-set>counter-set</span> and <span class=property data-link-type=propdesc title=counter-reset>counter-reset</span> properties</a>
<li><a href=#creating-counters><span class=secno>8.2</span> Creating and Inheriting Counters</a>
<li><a href=#nested-counters><span class=secno>8.3</span> Nested Counters</a>
<li><a href=#counters-without-boxes><span class=secno>8.4</span> Counters in elements that do not generate boxes</a></ul>
<li><a href=#counter-functions><span class=secno>9</span> Printing Counters: the <span class=css data-link-type=maybe title=counter()>counter()</span> and <span class=css data-link-type=maybe title=counters()>counters()</span> functions</a>
<li><a href=#ua-stylesheet><span class=secno>10</span> Sample style sheet for HTML</a>
<li><a href=#acknowledgments><span class=secno></span> Acknowledgments</a>
<li><a href=#changes><span class=secno></span> Changes From CSS2.1</a>
<li><a href=#conformance><span class=secno></span> Conformance</a>
<ul class=toc>
<li><a href=#conventions><span class=secno></span> Document conventions</a>
<li><a href=#conformance-classes><span class=secno></span> Conformance classes</a>
<li><a href=#partial><span class=secno></span> Partial implementations</a>
<li><a href=#experimental><span class=secno></span> Experimental implementations</a>
<li><a href=#testing><span class=secno></span> Non-experimental implementations</a></ul>
<li><a href=#references><span class=secno></span> References</a>
<ul class=toc>
<li><a href=#normative><span class=secno></span> Normative References</a>
<li><a href=#informative><span class=secno></span> Informative References</a></ul>
<li><a href=#index><span class=secno></span> Index</a>
<li><a href=#property-index><span class=secno></span> Property index</a>
<li><a href=#issues-index><span class=secno></span>Issues Index</a></ul></div>
<h2 class="heading settled heading" data-level=1 id=intro><span class=secno>1 </span><span class=content>
Introduction</span><a class=self-link href=#intro></a></h2>
<p class=issue id=issue-eddc918b><a class=self-link href=#issue-eddc918b></a><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>
<p>This specification defines the <a class=css data-link-type=maybe href=#selectordef-marker title=::marker>::marker</a> pseudo-element,
the <a class=css data-link-type=maybe href=#valuedef-list-item title=list-item>list-item</a> and <a class=css data-link-type=maybe href=#valuedef-inline-list-item title=inline-list-item>inline-list-item</a> <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visuren.html#propdef-display title=display>display</a> values that generate markers,
and several properties controlling the placement and styling of markers.</p>
<p>It also defines <a data-link-type=dfn href=#counter0 title=counters>counters</a>,
which are special numerical objects
often used to generate the default contents of markers.</p>
<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&gt;
li::marker { content: "(" counter(list-item, lower-roman) ")"; }
li { display: list-item; }
&lt;/style&gt;
&lt;ol&gt;
&lt;li&gt;This is the first item.&lt;/li&gt;
&lt;li&gt;This is the second item.&lt;/li&gt;
&lt;li&gt;This is the third item.&lt;/li&gt;
&lt;/ol&gt;
</pre>
<p>It should produce something like this:</p>
<pre> (i) This is the first item.
(ii) This is the second item.
(iii) This is the third item.
</pre>
<p class=note>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.</p>
</div>
<p>With descendant selectors and child selectors,
it’s possible to specify different marker types depending on the depth of embedded lists.</p>
<p class=issue id=issue-6c0d2c9e><a class=self-link href=#issue-6c0d2c9e></a>
A future release of this module will probably include ways to render tree lists.
<h2 class="heading settled heading" data-level=2 id=declaring-a-list-item><span class=secno>2 </span><span class=content>
Declaring a List Item</span><a class=self-link href=#declaring-a-list-item></a></h2>
<p>A <dfn data-dfn-type=dfn data-export="" id=list-item>list item<a class=self-link href=#list-item></a></dfn> is any element with its <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visuren.html#propdef-display title=display>display</a> property set to <a class=css data-link-type=maybe href=#valuedef-list-item title=list-item>list-item</a> or <a class=css data-link-type=maybe href=#valuedef-inline-list-item title=inline-list-item>inline-list-item</a>.
<a data-link-type=dfn href=#list-item title="list items">List items</a> generate <a class=css data-link-type=maybe href=#selectordef-marker title=::marker>::marker</a> pseudo-elements;
no other elements do.</p>
<p>Additionally, <a data-link-type=dfn href=#list-item title="list items">list items</a> automatically increment the special <a class=css data-link-type=maybe href=#valuedef-list-item title=list-item>list-item</a> <a data-link-type=dfn href=#counter0 title=counter>counter</a>.
Unless the <a class=property data-link-type=propdesc href=#propdef-counter-increment title=counter-increment>counter-increment</a> property manually specifies a different increment for the <a class=css data-link-type=maybe href=#valuedef-list-item title=list-item>list-item</a> <a data-link-type=dfn href=#counter0 title=counter>counter</a>,
it must be incremented by 1 on every <a data-link-type=dfn href=#list-item title="list item">list item</a>,
at the same time that <a data-link-type=dfn href=#counter0 title=counters>counters</a> are normally incremented.
(This has no effect on the values of the <a class=property data-link-type=propdesc title=counter-*>counter-*</a> properties.)</p>
<table class="definition propdef partial"><tr><th>Name:<td><a class=css-code data-link-type=property href=http://dev.w3.org/csswg/css2/visuren.html#propdef-display title=display>display</a><tr><th>New values:<td class=prod>inline-list-item</table>
<p>The <dfn class=css-code data-dfn-for=display data-dfn-type=value data-export="" id=valuedef-inline-list-item>inline-list-item<a class=self-link href=#valuedef-inline-list-item></a></dfn> display value makes the element a <a data-link-type=dfn href=#list-item title="list item">list item</a>,
with the effects described above.
Additionally, the <a class=css data-link-type=maybe href=#list-style-position-outside title=outside>outside</a> value of <a class=property data-link-type=propdesc href=#propdef-list-style-position title=list-style-position>list-style-position</a>
computes to <a class=css data-link-type=maybe href=#valuedef-inside title=inside>inside</a> on this element.
Otherwise, this display value is treated identically to <span class=css data-link-type=maybe title=inline>inline</span>.</p>
<p class=note>Note: This display value is silly,
and only necessary because we haven’t yet defined <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visuren.html#propdef-display title=display>display</a> 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.</p>
<h2 class="heading settled heading" data-level=3 id=marker-content><span class=secno>3 </span><span class=content>
Default Marker Contents: The <a class=property data-link-type=propdesc href=#propdef-list-style-image title=list-style-image>list-style-image</a> and <a class=property data-link-type=propdesc href=#propdef-list-style-type title=list-style-type>list-style-type</a> properties</span><a class=self-link href=#marker-content></a></h2>
<p>The contents of a <a class=css data-link-type=maybe href=#selectordef-marker title=::marker>::marker</a> pseudo-element can be generated automatically,
rather than being specified explicitly with <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-content-3/#content title=content>content</a>.
The <a class=property data-link-type=propdesc href=#propdef-list-style-image title=list-style-image>list-style-image</a> and <a class=property data-link-type=propdesc href=#propdef-list-style-type title=list-style-type>list-style-type</a> properties control how these contents are generated.</p>
<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-list-style-image>list-style-image<a class=self-link href=#propdef-list-style-image></a></dfn><tr><th>Value:<td class=prod><a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type title="<image>">&lt;image&gt;</a> <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> none<tr><th>Initial:<td>none<tr><th>Applies to:<td><a data-link-type=dfn href=#list-item title="list items">list items</a><tr><th>Inherited:<td>yes<tr><th>Media:<td>visual<tr><th>Computed value:<td>computed value fo the <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type title="<image>">&lt;image&gt;</a>, or <a class=css data-link-for=list-style-image data-link-type=maybe href=#valuedef-none0 title=none>none</a><tr><th>Percentages:<td>n/a</table>
<p>The <a class=property data-link-type=propdesc href=#propdef-list-style-image title=list-style-image>list-style-image</a> property specifies an image that will be used as the list marker’s <a data-link-type=dfn href=#default-contents title="default contents">default contents</a>.
The values are defined as follows:</p>
<dl data-dfn-for=list-style-image data-dfn-type=value>
<dt><dfn class=css-code data-dfn-for=list-style-image data-dfn-type=value data-export="" id=valuedef-image>&lt;image&gt;<a class=self-link href=#valuedef-image></a></dfn>
<dd>
If the <code>&lt;image&gt;</code> is not an <a href=http://www.w3.org/TR/css3-images/#invalid-image>invalid image</a>,
the image is the <a data-link-type=dfn href=#default-contents title="default contents">default contents</a> of the list item’s marker.
Otherwise, the <a data-link-type=dfn href=#default-contents title="default contents">default contents</a> are given by <a class=property data-link-type=propdesc href=#propdef-list-style-type title=list-style-type>list-style-type</a> instead.
<dt><dfn class=css-code data-dfn-for=list-style-image data-dfn-type=value data-export="" id=valuedef-none0>none<a class=self-link href=#valuedef-none0></a></dfn>
<dd>
The <a data-link-type=dfn href=#default-contents title="default contents">default contents</a> of the of the list item’s marker are given by <a class=property data-link-type=propdesc href=#propdef-list-style-type title=list-style-type>list-style-type</a> 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>
<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-list-style-type>list-style-type<a class=self-link href=#propdef-list-style-type></a></dfn><tr><th>Value:<td class=prod><a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-counter-styles-3/#typedef-counter-style title="<counter-style>">&lt;counter-style&gt;</a> <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#string-value title="<string>">&lt;string&gt;</a> <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> none<tr><th>Initial:<td>disc<tr><th>Applies to:<td><a data-link-type=dfn href=#list-item title="list items">list items</a><tr><th>Inherited:<td>yes<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified value<tr><th>Percentages:<td>n/a</table>
<p>When the value of <a class=property data-link-type=propdesc href=#propdef-list-style-image title=list-style-image>list-style-image</a> is <a class=css data-link-for=list-style-image data-link-type=maybe href=#valuedef-none0 title=none>none</a>
or an <a href=http://www.w3.org/TR/css3-images/#invalid-image>invalid image</a>,
the <a class=property data-link-type=propdesc href=#propdef-list-style-type title=list-style-type>list-style-type</a> property is used to construct the default contents of a list item’s marker;
otherwise, <a class=property data-link-type=propdesc href=#propdef-list-style-type title=list-style-type>list-style-type</a> is ignored.
The values are defined as follows:</p>
<dl data-dfn-for=list-style-type data-dfn-type=value>
<dt><dfn class=css-code data-dfn-for=list-style-type data-dfn-type=value data-export="" id=valuedef-counter-style>&lt;counter-style&gt;<a class=self-link href=#valuedef-counter-style></a></dfn>
<dd>
The list item’s marker’s <a data-link-type=dfn href=#default-contents title="default contents">default contents</a> are that counter style. <a data-biblio-type=informative data-link-type=biblio href=#biblio-css-counter-styles-3 title=biblio-css-counter-styles-3>[CSS-COUNTER-STYLES-3]</a>
<dt><dfn class=css-code data-dfn-for=list-style-type data-dfn-type=value data-export="" id=valuedef-string>&lt;string&gt;<a class=self-link href=#valuedef-string></a></dfn>
<dd>
The <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#string-value title="<string>">&lt;string&gt;</a> is used as the list item’s marker’s <a data-link-type=dfn href=#default-contents title="default contents">default contents</a>.
<dt><dfn class=css-code data-dfn-for=list-style-type data-dfn-type=value data-export="" id=valuedef-none1>none<a class=self-link href=#valuedef-none1></a></dfn>
<dd>
The list item’s marker’s <a data-link-type=dfn href=#default-contents title="default contents">default contents</a> are <a class=css data-link-type=maybe href=#valuedef-none0 title=none>none</a>.
</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 class="heading settled heading" data-level=4 id=list-style-position-property><span class=secno>4 </span><span class=content>
Marker Position: The <a class=property data-link-type=propdesc href=#propdef-list-style-position title=list-style-position>list-style-position</a> property</span><a class=self-link href=#list-style-position-property></a></h2>
<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-list-style-position>list-style-position<a class=self-link href=#propdef-list-style-position></a></dfn><tr><th>Value:<td class=prod>inside <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> outside<tr><th>Initial:<td>outside<tr><th>Applies to:<td><a data-link-type=dfn href=#list-item title="list items">list items</a><tr><th>Inherited:<td>yes<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified value (but see prose)<tr><th>Percentages:<td>n/a</table>
<p>This property helps control the position of the <a class=css data-link-type=maybe href=#selectordef-marker title=::marker>::marker</a> pseudo-element in the <a data-link-type=dfn href=#list-item title="list item">list item</a>.
The values are defined as follows:</p>
<dl data-dfn-for=list-style-position data-dfn-type=value>
<dt><dfn class=css-code data-dfn-for=list-style-position data-dfn-type=value data-export="" id=valuedef-inside>inside<a class=self-link href=#valuedef-inside></a></dfn>
<dd>
The <a class=css data-link-type=maybe href=#selectordef-marker title=::marker>::marker</a> pseudo-element is an inline element placed immediately before where the <span class=css data-link-type=maybe title=::before>::before</span> pseudo-element would be placed in the <a data-link-type=dfn href=#list-item title="list item">list item</a>.
<dt><dfn class=css-code data-dfn-for=list-style-position data-dfn-type=value data-export="" id=list-style-position-outside>outside<a class=self-link href=#list-style-position-outside></a></dfn>
<dd>
As <a class=css data-link-type=maybe href=#valuedef-inside title=inside>inside</a>, plus the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#position title=position>position</a> property on the marker computes to <a class=css data-link-type=maybe href=#valuedef-marker title=marker>marker</a>.
Additionally, the base directionality of the marker
(used as an input to the bidi resolution algorithm)
must be taken from the marker’s <a data-link-type=dfn href=#marker-positioning-reference-element title="marker positioning reference element">marker positioning reference element</a>.
<p>If the <a data-link-type=dfn href=#list-item title="list item">list item</a> is <a class=css data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visuren.html#propdef-display title=display>display: inline-list-item</a>,
this value computes to <a class=css data-link-type=maybe href=#valuedef-inside title=inside>inside</a>.</p>
</dl>
<p class=note>Note: Note that a marker is only generated
if the used value of the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-content-3/#content title=content>content</a> property for the <a class=css data-link-type=maybe href=#selectordef-marker title=::marker>::marker</a> pseudo-element is not <span class=css data-link-for=content data-link-type=maybe title=none>none</span>.</p>
<div class=example>
For example:
<pre> &lt;style&gt;
ul.compact { list-style: inside; }
ul { list-style: outside; }
&lt;/style&gt;
&lt;ul class=compact&gt;
&lt;li&gt;first "inside" list item comes first&lt;/li&gt;
&lt;li&gt;second "inside" list item comes first&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;ul&gt;
&lt;li&gt;first "outside" list item comes first&lt;/li&gt;
&lt;li&gt;second "outside" list item comes first&lt;/li&gt;
&lt;/ul&gt;
</pre>
<p>The above example may be formatted as:</p>
<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 class="heading settled heading" data-level=5 id=list-style-property><span class=secno>5 </span><span class=content>
The <a class=property data-link-type=propdesc href=#propdef-list-style title=list-style>list-style</a> shorthand property</span><a class=self-link href=#list-style-property></a></h2>
<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-list-style>list-style<a class=self-link href=#propdef-list-style></a></dfn><tr><th>Value:<td class=prod><a class=production data-link-type=propdesc href=#propdef-list-style-type title=list-style-type>&lt;‘list-style-type’&gt;</a> <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-any title=||>||</a> <a class=production data-link-type=propdesc href=#propdef-list-style-position title=list-style-position>&lt;‘list-style-position’&gt;</a> <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-any title=||>||</a> <a class=production data-link-type=propdesc href=#propdef-list-style-image title=list-style-image>&lt;‘list-style-image’&gt;</a><tr><th>Initial:<td>see individual properties<tr><th>Applies to:<td><a data-link-type=dfn href=#list-item title="list items">list items</a><tr><th>Inherited:<td>see individual properties<tr><th>Media:<td>visual<tr><th>Computed value:<td>see individual properties<tr><th>Percentages:<td>see individual properties</table>
<p>The <a class=property data-link-type=propdesc href=#propdef-list-style title=list-style>list-style</a> property is a shorthand notation
for setting the three properties <a class=property data-link-type=propdesc href=#propdef-list-style-type title=list-style-type>list-style-type</a>, <a class=property data-link-type=propdesc href=#propdef-list-style-image title=list-style-image>list-style-image</a>, and <a class=property data-link-type=propdesc href=#propdef-list-style-position title=list-style-position>list-style-position</a>
at the same place in the style sheet.</p>
<div class=example>
For example:
<pre> 6D50 UL { list-style: upper-roman inside } /* Any UL */
UL UL { list-style: circle outside } /* Any UL child of a UL */
</pre>
</div>
<p>Using a value of <a class=css data-link-type=maybe href=#valuedef-none0 title=none>none</a> in the shorthand is potentially ambiguous,
as <a class=css data-link-type=maybe href=#valuedef-none0 title=none>none</a> is a valid value for both <a class=property data-link-type=propdesc href=#propdef-list-style-image title=list-style-image>list-style-image</a> and <a class=property data-link-type=propdesc href=#propdef-list-style-type title=list-style-type>list-style-type</a>.
To resolve this ambiguity,
a value of <a class=css data-link-type=maybe href=#valuedef-none0 title=none>none</a> in the shorthand must be applied to whichever of the two properties aren’t otherwise set by the shorthand.</p>
<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 <a class=property data-link-type=propdesc href=#propdef-list-style title=list-style>list-style</a> information directly on list item elements
(e.g., <a data-link-type=element href=http://www.w3.org/html/wg/drafts/html/CR/grouping-content.html#the-li-element title=li>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>
<p>The above won’t work as expected.
If you nest a <a data-link-type=element href=http://www.w3.org/html/wg/drafts/html/CR/grouping-content.html#the-ul-element title=ul>ul</a> into an <a data-link-type=element href=http://www.w3.org/html/wg/drafts/html/CR/grouping-content.html#the-ol-element title=ol>ol class=alpha</a>,
the first rule’s specificity will make the <a data-link-type=element href=http://www.w3.org/html/wg/drafts/html/CR/grouping-content.html#the-ul-element title=ul>ul</a>’s list items use the lower-alpha style.</p>
<pre> ol.alpha &gt; li { list-style: lower-alpha; }
ul &gt; li { list-style: disc; }
</pre>
<p>These work as intended.</p>
<pre> ol.alpha { list-style: lower-alpha; }
ul { list-style: disc; }
</pre>
<p>These are even better,
since inheritance will transfer the <a class=property data-link-type=propdesc href=#propdef-list-style title=list-style>list-style</a> value to the list items.</p>
</div>
<h2 class="heading settled heading" data-level=6 id=marker-pseudo-element><span class=secno>6 </span><span class=content>
Markers: The <a class=css data-link-type=maybe href=#selectordef-marker title=::marker>::marker</a> pseudo-element</span><a class=self-link href=#marker-pseudo-element></a></h2>
<p>This specification defines a new type of pseudo-element,
the <dfn class=css-code data-dfn-type=selector data-export="" id=selectordef-marker>::marker<a class=self-link href=#selectordef-marker></a></dfn> pseudo-element,
which is generated by <a data-link-type=dfn href=#list-item title="list items">list items</a> to represent the item’s marker
(the bullet or number identifying each item).</p>
<p>Like <span class=css data-link-type=maybe title=::before>::before</span> and <span class=css data-link-type=maybe title=::after>::after</span>,
the <a class=css data-link-type=maybe href=#selectordef-marker title=::marker>::marker</a> 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 <span class=css data-link-type=maybe title=::before>::before</span> pseudo-element (if it exists).
<a class=css data-link-type=maybe href=#selectordef-marker title=::marker>::marker</a> pseudo-elements are inline by default,
though certain values for <a class=property data-link-type=propdesc href=#propdef-list-style-position title=list-style-position>list-style-position</a> on the list item can make the marker box positioned,
which can have an effect on the computed value of display.</p>
<p>The <a class=css data-link-type=maybe href=#selectordef-marker title=::marker>::marker</a> pseudo-element is only created on <a data-link-type=dfn href=#list-item title="list items">list items</a>.
On any other element,
the <a class=css data-link-type=maybe href=#selectordef-marker title=::marker>::marker</a> pseudo-element’s <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-content-3/#content title=content>content</a> property must compute to <span class=css data-link-for=content data-link-type=maybe title=none>none</span>,
which suppresses its creation.</p>
<div class=example>
In the following example,
the content is centered within a marker box of a fixed width.
This document:
<pre> &lt;style&gt;
li::marker {
content: "(" counter(counter) ")";
width: 6em;
text-align: center;
}
li {
display: list-item;
counter-increment: counter;
}
&lt;/style&gt;
&lt;ol&gt;
&lt;li&gt;This is the first item.&lt;/li&gt;
&lt;li&gt;This is the second item.&lt;/li&gt;
&lt;li&gt;This is the third item.&lt;/li&gt;
&lt;/ol&gt;
</pre>
<p>should render something like this:</p>
<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&gt;
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&gt;
&lt;p&gt;This is the first paragraph in this document.&lt;/p&gt;
&lt;p class="note"&gt;This is a very short document.&lt;/p&gt;
&lt;p&gt;This is the end.&lt;/p&gt;
</pre>
<p>It should render something like this:</p>
<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 <a class=css data-link-type=maybe href=#selectordef-marker title=::marker>::marker</a> 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&gt;
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&gt;
&lt;p&gt;This is a long preceding paragraph ...&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;This is the first item.&lt;/li&gt;
&lt;li&gt;This is the second item.&lt;/li&gt;
&lt;li&gt;This is the third item.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;This is a long following paragraph ...&lt;/p&gt;
</pre>
<p>The preceding document should render something like this:</p>
<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>
<p>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 <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/box.html#propdef-margin title=margin>margin</a> couldn’t be adjusted at all on the marker.</p>
</div>
<h3 class="heading settled heading" data-level=6.1 id=content-property><span class=secno>6.1 </span><span class=content>
Generating the value of the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-content-3/#content title=content>content</a> property</span><a class=self-link href=#content-property></a></h3>
<p>The <a class=css data-link-type=maybe href=#selectordef-marker title=::marker>::marker</a> pseudo-element’s <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-content-3/#content title=content>content</a> property is set according to its <dfn data-dfn-type=dfn data-noexport="" id=default-contents>default contents<a class=self-link href=#default-contents></a></dfn>,
which are defined by the <a class=property data-link-type=propdesc href=#propdef-list-style-image title=list-style-image>list-style-image</a> and <a class=property data-link-type=propdesc href=#propdef-list-style-type title=list-style-type>list-style-type</a> properties:</p>
<dl>
<dt>an <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type title="<image>">&lt;image&gt;</a>
<dd>
The computed value of the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-content-3/#content title=content>content</a> property is the computed value of the <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type title="<image>">&lt;image&gt;</a>,
followed by a string containing a single space (U+0020 SPACE).
<dt>a <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#string-value title="<string>">&lt;string&gt;</a>
<dd>
The computed value of the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-content-3/#content title=content>content</a> property is the &lt;string&gt;.
<dt>a <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-counter-styles-3/#typedef-counter-style title="<counter-style>">&lt;counter-style&gt;</a>
<dd>
The computed value of the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-content-3/#content title=content>content</a> property is
<code><a class="production css-code" data-link-type=type href=#typedef-counter-prefix title="<counter-prefix>">&lt;counter-prefix&gt;</a> counter(list-item, <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-counter-styles-3/#typedef-counter-style title="<counter-style>">&lt;counter-style&gt;</a>) <a class="production css-code" data-link-type=type href=#typedef-counter-suffix title="<counter-suffix>">&lt;counter-suffix&gt;</a></code>,
where <dfn class=css-code data-dfn-type=type data-export="" id=typedef-counter-prefix no-export="">&lt;counter-prefix&gt;<a class=self-link href=#typedef-counter-prefix></a></dfn> and <dfn class=css-code data-dfn-type=type data-export="" id=typedef-counter-suffix no-export="">&lt;counter-suffix&gt;<a class=self-link href=#typedef-counter-suffix></a></dfn> are the values of the <span class=css data-link-type=maybe title=@counter-style/prefix>@counter-style/prefix</span> and <span class=css data-link-type=maybe title=@counter-style/suffix>@counter-style/suffix</span> descriptors for the counter style.
<dt><a class=css data-link-type=maybe href=#valuedef-none0 title=none>none</a>
<dd>
The computed value of the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-content-3/#content title=content>content</a> property is <span class=css data-link-for=content data-link-type=maybe title=none>none</span>.
</dl>
<p>If the computed value of <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-content-3/#content title=content>content</a> was an <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type title="<image>">&lt;image&gt;</a>,
and it ends up resolving to an <a data-link-type=dfn href=http://dev.w3.org/csswg/css-images-4/#invalid-image title="invalid image">invalid image</a>,
the used value of the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-content-3/#content title=content>content</a> property
is as above,
but with the <a data-link-type=dfn href=#default-contents title="default contents">default contents</a> determined solely by <a class=property data-link-type=propdesc href=#propdef-list-style-type title=list-style-type>list-style-type</a>.</p>
<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>
<p>And the following document fragment:</p>
<pre>&lt;li&gt;List Item&lt;/li&gt;</pre>
<p>The computed value of the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-content-3/#content title=content>content</a> property on the <a class=css data-link-type=maybe href=#selectordef-marker title=::marker>::marker</a> pseudo-element of the <a data-link-type=element href=http://www.w3.org/html/wg/drafts/html/CR/grouping-content.html#the-li-element title=li>li</a> is:</p>
<pre>counter(list-item, decimal) "."</pre>
</div>
<h2 class="heading settled heading" data-level=7 id=positioning-markers><span class=secno>7 </span><span class=content>
Positioning Markers</span><a class=self-link href=#positioning-markers></a></h2>
<p class=issue id=issue-bb3d39c0><a class=self-link href=#issue-bb3d39c0></a><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>
<p>This section introduces a new positioning scheme,
designed to model the way in which <span class=css data-link-type=maybe title=list-style-position:outside>list-style-position:outside</span> list markers were traditionally positioned in CSS 2.1.
Outside list markers now have their positioning defined in terms of this new value.</p>
<p>The new positioning scheme defined in this section can be used on all elements,
not just <a class=css data-link-type=maybe href=#selectordef-marker title=::marker>::marker</a> 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.</p>
<h3 class="heading settled heading" data-level=7.1 id=position-marker><span class=secno>7.1 </span><span class=content>
The <a class=css data-link-type=maybe href=#valuedef-marker title=marker>marker</a> value for <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#position title=position>position</a></span><a class=self-link href=#position-marker></a></h3>
<table class="definition propdef partial"><tr><th>Name:<td><a class=css-code data-link-type=property href=http://dev.w3.org/csswg/css-position-3/#position title=position>position</a><tr><th>New values:<td class=prod>marker<tr><th>Computed value:<td>see prose, otherwise same as normal</table>
<p>The <dfn class=css-code data-dfn-for=position data-dfn-type=value data-export="" id=valuedef-marker>marker<a class=self-link href=#valuedef-marker></a></dfn> value for <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#position title=position>position</a> depends on the element it is set on having a <a data-link-type=dfn href=#list-item title="list item">list item</a> ancestor.
If the specified value of <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#position title=position>position</a> is <a class=css data-link-for=position data-link-type=maybe href=#valuedef-marker title=marker>marker</a>
and the element does not have a <a data-link-type=dfn href=#list-item title="list item">list item</a> ancestor,
<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#position title=position>position</a> must compute to <span class=css data-link-for=position data-link-type=maybe title=relative>relative</span> on the element.
An element with <span class=css data-link-type=maybe title=position:marker>position:marker</span> counts as <a href=http://www.w3.org/TR/CSS21/visuren.html#absolutely-positioned>absolutely positioned</a>.</p>
<p>To calculate the marker’s position, we must first define a few terms:</p>
<dl>
<dt><dfn data-dfn-type=dfn data-noexport="" id=ancestor-list-item>ancestor list item<a class=self-link href=#ancestor-list-item></a></dfn>
<dd>The <a data-link-type=dfn href=#ancestor-list-item title="ancestor list item">ancestor list item</a> is the marker’s nearest list item ancestor element.
<dt><dfn data-dfn-type=dfn data-noexport="" id=marker-positioning-reference-element>marker positioning reference element<a class=self-link href=#marker-positioning-reference-element></a></dfn>
<dd>
If the <a data-link-type=dfn href=#ancestor-list-item title="ancestor list item">ancestor list item</a> has <span class=css data-link-type=maybe title=marker-side:list-item>marker-side:list-item</span>,
the <a data-link-type=dfn href=#marker-positioning-reference-element title="marker positioning reference element">marker positioning reference element</a> is the <a data-link-type=dfn href=#ancestor-list-item title="ancestor list item">ancestor list item</a>.
<p>Otherwise, if the <a data-link-type=dfn href=#ancestor-list-item title="ancestor list item">ancestor list item</a> has <span class=css data-link-type=maybe title=marker-side:list-container>marker-side:list-container</span> and has a parent element,
the <a data-link-type=dfn href=#marker-positioning-reference-element title="marker positioning reference element">marker positioning reference element</a> is the <a data-link-type=dfn href=#ancestor-list-item title="ancestor list item’s">ancestor list item’s</a> parent.</p>
<p>Otherwise, the <a data-link-type=dfn href=#marker-positioning-reference-element title="marker positioning reference element">marker positioning reference element</a> is the <a data-link-type=dfn href=#ancestor-list-item title="ancestor list item">ancestor list item</a>.</p>
<dt><dfn data-dfn-type=dfn data-noexport="" id=list-item-positioning-edge>list item positioning edge<a class=self-link href=#list-item-positioning-edge></a></dfn>
<dd>
The border edge of the <a data-link-type=dfn href=#ancestor-list-item title="ancestor list item">ancestor list item</a> corresponding to the "start" or "head" edge of the <a data-link-type=dfn href=#marker-positioning-reference-element title="marker positioning reference element">marker positioning reference element</a>,
whichever is in the <a data-link-type=dfn href=#ancestor-list-item title="ancestor list item’s">ancestor list item’s</a> inline axis.
<dt><dfn data-dfn-type=dfn data-noexport="" id=marker-positioning-edge>marker positioning edge<a class=self-link href=#marker-positioning-edge></a></dfn>
<dd>
The outer edge of the marker that’s on the opposite side from the <a data-link-type=dfn href=#list-item-positioning-edge title="list item positioning edge">list item positioning edge</a>.
For example, if the <a data-link-type=dfn href=#list-item-positioning-edge title="list item positioning edge">list item positioning edge</a> ended up being the left border edge of the <a data-link-type=dfn href=#ancestor-list-item title="ancestor list item">ancestor list item</a>,
the <a data-link-type=dfn href=#marker-positioning-edge title="marker positioning edge">marker positioning edge</a> would be the right margin edge of the marker.
</dl>
<p>The marker’s position in the <a data-link-type=dfn href=#ancestor-list-item title="ancestor list item">ancestor list item</a>’s block axis
is calculated according to the <a href=http://www.w3.org/TR/CSS21/visuren.html#normal-flow>normal flow</a>.</p>
<p>The marker’s position in the <a data-link-type=dfn href=#ancestor-list-item title="ancestor list item’s">ancestor list item’s</a> inline axis must be set such that
the <a data-link-type=dfn href=#marker-positioning-edge title="marker positioning edge">marker positioning edge</a> is flush with the <a data-link-type=dfn href=#list-item-positioning-edge title="list item positioning edge">list item positioning edge</a>.</p>
<p class=note>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.</p>
<p>All elements or pseudo-elements with <span class=css data-link-type=maybe title=position:marker>position:marker</span>
that share a common <a data-link-type=dfn href=#ancestor-list-item title="ancestor list item">ancestor list item</a>
are known as <dfn data-dfn-type=dfn data-noexport="" id=associated-marker title=associated-marker>markers associated with that list item<a class=self-link href=#associated-marker></a></dfn>.</p>
<p>The <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#top title=top>top</a>, <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#right title=right>right</a>, <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#bottom title=bottom>bottom</a>, and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#left title=left>left</a> properties specify offsets
relative to the top, right, bottom, and left edges (respectively) of the element itself,
similar to how relative positioning works.</p>
<div class=example>
<span class=css data-link-type=maybe title=position:marker>position:marker</span> 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&gt;
ol { list-style: none; }
.marker { position: marker; }
&lt;/style&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;span class='marker'&gt;(a)&lt;/span&gt; Definitions.— For purposes of this section—<wbr>&lt;ol&gt;
&lt;li&gt;&lt;span class='marker'&gt;(1)&lt;/span&gt; the term “agency” means agency as...
&lt;li&gt;&lt;span class='marker'&gt;(2)&lt;/span&gt; the term “individual” means a citizen...
&lt;/ol&gt;
&lt;li&gt;
&lt;span class='marker'&gt;(b)&lt;/span&gt; Conditions of Disclosure.— No agency shall disclose...
&lt;ol&gt;
&lt;li&gt;&lt;span class='marker'&gt;(1)&lt;/span&gt; to those officers and employees of the agency...
&lt;li&gt;&lt;span class='marker'&gt;(2)&lt;/span&gt; required under section 552 of this title;
&lt;/ol&gt;
&lt;/ol&gt;
</pre>
<p>The preceding document should render something like this:</p>
<pre> (a) Definitions.— For purposes of this section—<wbr>(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>
<p>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.</p>
</div>
<h3 class="heading settled heading" data-level=7.2 id=marker-side><span class=secno>7.2 </span><span class=content>
The <a class=property data-link-type=propdesc href=#propdef-marker-side title=marker-side>marker-side</a> property</span><a class=self-link href=#marker-side></a></h3>
<p>By default, elements or <a class=css data-link-type=maybe href=#selectordef-marker title=::marker>::marker</a> pseudo-elements with <span class=css data-link-type=maybe title=position:marker>position:marker</span>
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&gt;s with different "dir" attributes in an &lt;ol&gt; 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 <a class=property data-link-type=propdesc href=#propdef-marker-side title=marker-side>marker-side</a> 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.</p>
<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-marker-side>marker-side<a class=self-link href=#propdef-marker-side></a></dfn><tr><th>Value:<td class=prod>list-item <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> list-container<tr><th>Initial:<td>list-item<tr><th>Applies to:<td><a data-link-type=dfn href=#list-item title="list items">list items</a><tr><th>Inherited:<td>yes<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified value<tr><th>Percentages:<td>n/a</table>
<dl data-dfn-for=marker-side data-dfn-type=value>
<dt><dfn class=css-code data-dfn-for=marker-side data-dfn-type=value data-export="" id=valuedef-list-item>list-item<a class=self-link href=#valuedef-list-item></a></dfn>
<dd>
Any <a data-link-type=dfn href=#associated-marker title=associated-marker>markers associated with the list item</a> base their positioning off of the directionality of the list item.
<dt><dfn class=css-code data-dfn-for=marker-side data-dfn-type=value data-export="" id=valuedef-list-container>list-container<a class=self-link href=#valuedef-list-container></a></dfn>
<dd>
The <a data-link-type=dfn href=#associated-marker title=associated-marker>associated markers</a> 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 <a class=property data-link-type=propdesc href=#propdef-marker-side title=marker-side>marker-side</a> 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 <a class=property data-link-type=propdesc href=#propdef-marker-side title=marker-side>marker-side</a> on the list:
<pre> &lt;ul&gt;
&lt;li&gt;english one
&lt;li dir=rtl&gt;OWT WERBEH
&lt;li&gt;english three
&lt;li dir=rtl&gt;RUOF WERBEH
&lt;/ul&gt;
</pre>
<table class=data style="width: 35em;">
<thead>
<tr>
<th>list-item
<th>list-container
<tbody>
<tr>
<td style="border-right: thin solid">
<pre>
* english one
OWT WERBEH *
* english three
RUOF WERBEH *</pre>
<td>
<pre>
* english one
* OWT WERBEH
* english three
* RUOF WERBEH</pre>
</table>
</div>
<h2 class="heading settled heading" data-level=8 id=counter><span class=secno>8 </span><span class=content>
Automatic Numbering With Counters</span><a class=self-link href=#counter></a></h2>
<p>A <dfn data-dfn-type=dfn data-export="" id=counter0>counter<a class=self-link href=#counter0></a></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 <a class=property data-link-type=propdesc href=#propdef-counter-increment title=counter-increment>counter-increment</a>, <a class=property data-link-type=propdesc href=#propdef-counter-set title=counter-set>counter-set</a> and <a class=property data-link-type=propdesc href=#propdef-counter-reset title=counter-reset>counter-reset</a> properties,
and used with the <a class=css data-link-type=maybe href=#funcdef-counter title=counter()>counter()</a> and <a class=css data-link-type=maybe href=#funcdef-counters title=counters()>counters()</a> functions.
Counters have a name,
an integer value,
a creator element,
and possibly another counter nested inside themselves.</p>
<h3 class="heading settled heading" data-level=8.1 id=counter-properties><span class=secno>8.1 </span><span class=content>
Manipulating Counters: the <a class=property data-link-type=propdesc href=#propdef-counter-increment title=counter-increment>counter-increment</a>, <a class=property data-link-type=propdesc href=#propdef-counter-set title=counter-set>counter-set</a> and <a class=property data-link-type=propdesc href=#propdef-counter-reset title=counter-reset>counter-reset</a> properties</span><a class=self-link href=#counter-properties></a></h3>
<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-counter-reset>counter-reset<a class=self-link href=#propdef-counter-reset></a></dfn><tr><th>Value:<td class=prod>[ <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#identifier-value title="<custom-ident>">&lt;custom-ident&gt;</a> <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-integer title="<integer>">&lt;integer&gt;</a><a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#mult-opt title=?>?</a> ]<a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#mult-one-plus title=+>+</a> <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> none<tr><th>Initial:<td>none<tr><th>Applies to:<td>all elements<tr><th>Inherited:<td>no<tr><th>Media:<td>all<tr><th>Computed value:<td>specified value<tr><th>Percentages:<td>n/a</table>
<p>The <a class=property data-link-type=propdesc href=#propdef-counter-reset title=counter-reset>counter-reset</a> property <a data-link-type=dfn href=#create-a-new-counter title="create a new counter">creates new counters</a> on an element.
Its values are defined as follows:</p>
<dl data-dfn-for=counter-reset data-dfn-type=value>
<dt><dfn class=css-code data-dfn-for=counter-reset data-dfn-type=value data-export="" id=valuedef-none2>none<a class=self-link href=#valuedef-none2></a></dfn>
<dd>
This element does not create any new counters.
<dt><dfn class=css-code data-dfn-for=counter-reset data-dfn-type=value data-export="" id=valuedef-custom-ident-integer0><a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#identifier-value title="<custom-ident>">&lt;custom-ident&gt;</a> <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-integer title="<integer>">&lt;integer&gt;</ 23A a>?<a class=self-link href=#valuedef-custom-ident-integer0></a></dfn>
<dd>
The element <a d EB46 ata-link-type=dfn href=#create-a-new-counter title="create a new counter">creates one or more new counters</a>.
Each <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#identifier-value title="<custom-ident>">&lt;custom-ident&gt;</a> names a new counter to be created.
<p>If an <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-integer title="<integer>">&lt;integer&gt;</a> is provided after an <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#identifier-value title="<custom-ident>">&lt;custom-ident&gt;</a>,
the starting value of the new counter is that integer.
Otherwise, the starting value of the new counter is <span class=css data-link-type=maybe title=0>0</span>.</p>
<p>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.</p>
</dl>
<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-counter-set>counter-set<a class=self-link href=#propdef-counter-set></a></dfn><tr><th>Value:<td class=prod>[ <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#identifier-value title="<custom-ident>">&lt;custom-ident&gt;</a> <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-integer title="<integer>">&lt;integer&gt;</a><a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#mult-opt title=?>?</a> ]<a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#mult-one-plus title=+>+</a> <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> none<tr><th>Initial:<td>none<tr><th>Applies to:<td>all elements<tr><th>Inherited:<td>no<tr><th>Media:<td>all<tr><th>Computed value:<td>specified value<tr><th>Percentages:<td>n/a</table>
<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-counter-increment>counter-increment<a class=self-link href=#propdef-counter-increment></a></dfn><tr><th>Value:<td class=prod>[ <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#identifier-value title="<custom-ident>">&lt;custom-ident&gt;</a> <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-integer title="<integer>">&lt;integer&gt;</a><a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#mult-opt title=?>?</a> ]<a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#mult-one-plus title=+>+</a> <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> none<tr><th>Initial:<td>none<tr><th>Applies to:<td>all elements<tr><th>Inherited:<td>no<tr><th>Media:<td>all<tr><th>Computed value:<td>specified value<tr><th>Percentages:<td>n/a</table>
<p>The <a class=property data-link-type=propdesc href=#propdef-counter-set title=counter-set>counter-set</a> and <a class=property data-link-type=propdesc href=#propdef-counter-increment title=counter-increment>counter-increment</a> 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:</p>
<dl data-dfn-for="counter-set counter-increment" data-dfn-type=value>
<dt><dfn class=css-code data-dfn-for="counter-set counter-increment" data-dfn-type=value data-export="" id=valuedef-none>none<a class=self-link href=#valuedef-none></a></dfn>
<dd>
This element does not alter the value of any counters.
<dt><dfn class=css-code data-dfn-for="counter-set counter-increment" data-dfn-type=value data-export="" id=valuedef-custom-ident-integer><a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#identifier-value title="<custom-ident>">&lt;custom-ident&gt;</a> <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-integer title="<integer>">&lt;integer&gt;</a>?<a class=self-link href=#valuedef-custom-ident-integer></a></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 <a data-link-type=dfn href=#create-a-new-counter title="create a new counter">creates a new counter</a> of the given name
with a starting value of <span class=css data-link-type=maybe title=0>0</span>
(though it may then immediately set or increment that value to something different).
<p>If an <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-integer title="<integer>">&lt;integer&gt;</a> is provided after an <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#identifier-value title="<custom-ident>">&lt;custom-ident&gt;</a>,
it sets the innermost counter of the given name’s value to that integer (for <a class=property data-link-type=propdesc href=#propdef-counter-set title=counter-set>counter-set</a>)
or increments the value of the innermost counter of the given name by that integer (for <a class=property data-link-type=propdesc href=#propdef-counter-increment title=counter-increment>counter-increment</a>).
Otherwise,
the innermost counter of the given name’s value is set to <span class=css data-link-type=maybe title=0>0</span> (for <a class=property data-link-type=propdesc href=#propdef-counter-set title=counter-set>counter-set</a>)
or incremented by <span class=css data-link-type=maybe title=1>1</span> (for <a class=property data-link-type=propdesc href=#propdef-counter-increment title=counter-increment>counter-increment</a>).</p>
</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>
<p>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 <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-content-3/#content title=content>content</a> property).</p>
<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>
<p>will only reset <span class=css data-link-type=maybe title=imagenum>imagenum</span>.
To reset both counters,
they have to be specified together:</p>
<div class=example>
<pre>H1 { counter-reset: section -1 imagenum 99 }</pre>
</div>
<p>The same principles apply to the <a class=property data-link-type=propdesc href=#propdef-counter-set title=counter-set>counter-set</a> and <a class=property data-link-type=propdesc href=#propdef-counter-increment title=counter-increment>counter-increment</a> properties.</p>
</div>
<h3 class="heading settled heading" data-level=8.2 id=creating-counters><span class=secno>8.2 </span><span class=content>
Creating and Inheriting Counters</span><a class=self-link href=#creating-counters></a></h3>
<p>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.</p>
<p>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.</p>
<p>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.)</p>
<div class=example id=counter-inheritance-example><a class=self-link href=#counter-inheritance-example></a>
Take the following code as an example:
<pre> &lt;ul style='counter-reset: example 0;'&gt;
<b class=foo>&lt;li id='foo' style='counter-increment: example;'&gt;</b>
foo
<b class=bar>&lt;div id='bar' style='counter-increment: example;'&gt;bar&lt;/div&gt;</b>
&lt;/li&gt;
<b class=baz>&lt;li id='baz'&gt;</b>
baz
&lt;/li&gt;
&lt;/ul&gt;
</pre>
<p>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.</p>
<p>In here, the <code>&lt;ul&gt;</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&gt;</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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
</div>
View remainder of file in raw view