CINXE.COM

<!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> <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"> <meta content="refining" name="csswg-work-status"> <meta content="WD" name="w3c-status"> <meta content="This module contains CSS features related to list counters: styling them, positioning them, and manipulating their value." name="abstract"> <link href="default.css" rel="stylesheet" type="text/css"> <meta content="Bikeshed version dcd6d516, updated Tue Nov 17 14:40:21 2020 -0800" name="generator"> <link href="https://www.w3.org/TR/css-lists-3/" rel="canonical"> <meta content="58446d2c3defb1b37d2bffbffc5a1d1e8e03a471" name="document-revision"> <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> <style> #counter-inheritance-example b.foo { color: red; } #counter-inheritance-example b.bar { color: green; } #counter-inheritance-example b.baz { color: blue; } </style> <style>/* style-autolinks */ .css.css, .property.property, .descriptor.descriptor { color: var(--a-normal-text); font-size: inherit; font-family: inherit; } .css::before, .property::before, .descriptor::before { content: "‘"; } .css::after, .property::after, .descriptor::after { content: "’"; } .property, .descriptor { /* Don't wrap property and descriptor names */ white-space: nowrap; } .type { /* CSS value <type> */ font-style: italic; } pre .property::before, pre .property::after { content: ""; } [data-link-type="property"]::before, [data-link-type="propdesc"]::before, [data-link-type="descriptor"]::before, [data-link-type="value"]::before, [data-link-type="function"]::before, [data-link-type="at-rule"]::before, [data-link-type="selector"]::before, [data-link-type="maybe"]::before { content: "‘"; } [data-link-type="property"]::after, [data-link-type="propdesc"]::after, [data-link-type="descriptor"]::after, [data-link-type="value"]::after, [data-link-type="function"]::after, [data-link-type="at-rule"]::after, [data-link-type="selector"]::after, [data-link-type="maybe"]::after { content: "’"; } [data-link-type].production::before, [data-link-type].production::after, .prod [data-link-type]::before, .prod [data-link-type]::after { content: ""; } [data-link-type=element], [data-link-type=element-attr] { font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace; font-size: .9em; } [data-link-type=element]::before { content: "<" } [data-link-type=element]::after { content: ">" } [data-link-type=biblio] { white-space: pre; }</style> <style>/* style-counters */ body { counter-reset: example figure issue; } .issue { counter-increment: issue; } .issue:not(.no-marker)::before { content: "Issue " counter(issue); } .example { counter-increment: example; } .example:not(.no-marker)::before { content: "Example " counter(example); } .invalid.example:not(.no-marker)::before, .illegal.example:not(.no-marker)::before { content: "Invalid Example" counter(example); } figcaption { counter-increment: figure; } figcaption:not(.no-marker)::before { content: "Figure " counter(figure) " "; }</style> <style>/* style-dfn-panel */ :root { --dfnpanel-bg: #ddd; --dfnpanel-text: var(--text); } .dfn-panel { position: absolute; z-index: 35; height: auto; width: -webkit-fit-content; width: fit-content; max-width: 300px; max-height: 500px; overflow: auto; padding: 0.5em 0.75em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: var(--dfnpanel-bg); color: var(--dfnpanel-text); border: outset 0.2em; } .dfn-panel:not(.on) { display: none; } .dfn-panel * { margin: 0; padding: 0; text-indent: 0; } .dfn-panel > b { display: block; } .dfn-panel a { color: var(--dfnpanel-text); } .dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; } .dfn-panel > b + b { margin-top: 0.25em; } .dfn-panel ul { padding: 0; } .dfn-panel li { list-style: inside; } .dfn-panel.activated { display: inline-block; position: fixed; left: .5em; bottom: 2em; margin: 0 auto; max-width: calc(100vw - 1.5em - .4em - .5em); max-height: 30vh; } .dfn-paneled { cursor: pointer; } </style> <style>/* style-md-lists */ /* This is a weird hack for me not yet following the commonmark spec regarding paragraph and lists. */ [data-md] > :first-child { margin-top: 0; } [data-md] > :last-child { margin-bottom: 0; }</style> <style>/* style-selflinks */ :root { --selflink-text: white; --selflink-bg: gray; --selflink-hover-text: black; } .heading, .issue, .note, .example, li, dt { position: relative; } a.self-link { position: absolute; top: 0; left: calc(-1 * (3.5rem - 26px)); width: calc(3.5rem - 26px); height: 2em; text-align: center; border: none; transition: opacity .2s; opacity: .5; } a.self-link:hover { opacity: 1; } .heading > a.self-link { font-size: 83%; } li > a.self-link { left: calc(-1 * (3.5rem - 26px) - 2em); } dfn > a.self-link { top: auto; left: auto; opacity: 0; width: 1.5em; height: 1.5em; background: var(--selflink-bg); color: var(--selflink-text); font-style: normal; transition: opacity .2s, background-color .2s, color .2s; } dfn:hover > a.self-link { opacity: 1; } dfn > a.self-link:hover { color: var(--selflink-hover-text); } a.self-link::before { content: "¶"; } .heading > a.self-link::before { content: "§"; } dfn > a.self-link::before { content: "#"; } </style> <style>/* style-syntax-highlighting */ code.highlight { padding: .1em; border-radius: .3em; } pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; } .highlight:not(.idl) { background: rgba(0, 0, 0, .03); } c-[a] { color: #990055 } /* Keyword.Declaration */ c-[b] { color: #990055 } /* Keyword.Type */ c-[c] { color: #708090 } /* Comment */ c-[d] { color: #708090 } /* Comment.Multiline */ c-[e] { color: #0077aa } /* Name.Attribute */ c-[f] { color: #669900 } /* Name.Tag */ c-[g] { color: #222222 } /* Name.Variable */ c-[k] { color: #990055 } /* Keyword */ c-[l] { color: #000000 } /* Literal */ c-[m] { color: #000000 } /* Literal.Number */ c-[n] { color: #0077aa } /* Name */ c-[o] { color: #999999 } /* Operator */ c-[p] { color: #999999 } /* Punctuation */ c-[s] { color: #a67f59 } /* Literal.String */ c-[t] { color: #a67f59 } /* Literal.String.Single */ c-[u] { color: #a67f59 } /* Literal.String.Double */ c-[cp] { color: #708090 } /* Comment.Preproc */ c-[c1] { color: #708090 } /* Comment.Single */ c-[cs] { color: #708090 } /* Comment.Special */ c-[kc] { color: #990055 } /* Keyword.Constant */ c-[kn] { color: #990055 } /* Keyword.Namespace */ c-[kp] { color: #990055 } /* Keyword.Pseudo */ c-[kr] { color: #990055 } /* Keyword.Reserved */ c-[ld] { color: #000000 } /* Literal.Date */ c-[nc] { color: #0077aa } /* Name.Class */ c-[no] { color: #0077aa } /* Name.Constant */ c-[nd] { color: #0077aa } /* Name.Decorator */ c-[ni] { color: #0077aa } /* Name.Entity */ c-[ne] { color: #0077aa } /* Name.Exception */ c-[nf] { color: #0077aa } /* Name.Function */ c-[nl] { color: #0077aa } /* Name.Label */ c-[nn] { color: #0077aa } /* Name.Namespace */ c-[py] { color: #0077aa } /* Name.Property */ c-[ow] { color: #999999 } /* Operator.Word */ c-[mb] { color: #000000 } /* Literal.Number.Bin */ c-[mf] { color: #000000 } /* Literal.Number.Float */ c-[mh] { color: #000000 } /* Literal.Number.Hex */ c-[mi] { color: #000000 } /* Literal.Number.Integer */ c-[mo] { color: #000000 } /* Literal.Number.Oct */ c-[sb] { color: #a67f59 } /* Literal.String.Backtick */ c-[sc] { color: #a67f59 } /* Literal.String.Char */ c-[sd] { color: #a67f59 } /* Literal.String.Doc */ c-[se] { color: #a67f59 } /* Literal.String.Escape */ c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */ c-[si] { color: #a67f59 } /* Literal.String.Interpol */ c-[sx] { color: #a67f59 } /* Literal.String.Other */ c-[sr] { color: #a67f59 } /* Literal.String.Regex */ c-[ss] { color: #a67f59 } /* Literal.String.Symbol */ c-[vc] { color: #0077aa } /* Name.Variable.Class */ c-[vg] { color: #0077aa } /* Name.Variable.Global */ c-[vi] { color: #0077aa } /* Name.Variable.Instance */ c-[il] { color: #000000 } /* Literal.Number.Integer.Long */ </style> <style>/* style-var-click-highlighting */ var { cursor: pointer; } var.selected0 { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } var.selected1 { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } var.selected2 { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } var.selected3 { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } var.selected4 { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } var.selected5 { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } var.selected6 { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } </style> <link href="https://www.w3.org/StyleSheets/TR/2016/W3C-WD" rel="stylesheet" type="text/css"> <body class="h-entry"> <div class="head"> <a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> <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" id="subtitle">W3C Working Draft, <time class="dt-updated" datetime="2020-11-17">17 November 2020</time></h2> <div data-fill-with="spec-metadata"> <dl> <dt>This version: <dd><a class="u-url" href="https://www.w3.org/TR/2020/WD-css-lists-3-20201117/">https://www.w3.org/TR/2020/WD-css-lists-3-20201117/</a> <dt>Latest published version: <dd><a href="https://www.w3.org/TR/css-lists-3/">https://www.w3.org/TR/css-lists-3/</a> <dt>Editor's Draft: <dd><a href="https://drafts.csswg.org/css-lists-3/">https://drafts.csswg.org/css-lists-3/</a> <dt>Previous Versions: <dd><a href="https://www.w3.org/TR/2020/WD-css-lists-3-20200709/" rel="prev">https://www.w3.org/TR/2020/WD-css-lists-3-20200709/</a> <dd><a href="https://www.w3.org/TR/2019/WD-css-lists-3-20190817/" rel="prev">https://www.w3.org/TR/2019/WD-css-lists-3-20190817/</a> <dd><a href="https://www.w3.org/TR/2019/WD-css-lists-3-20190425/" rel="prev">https://www.w3.org/TR/2019/WD-css-lists-3-20190425/</a> <dd><a href="https://www.w3.org/TR/2014/WD-css-lists-3-20140320/" rel="prev">https://www.w3.org/TR/2014/WD-css-lists-3-20140320/</a> <dd><a href="https://www.w3.org/TR/2011/WD-css3-lists-20110524/" rel="prev">https://www.w3.org/TR/2011/WD-css3-lists-20110524/</a> <dt>Issue Tracking: <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-lists-3">CSSWG Issues Repository</a> <dd><a href="#issues-index">Inline In Spec</a> <dt class="editor">Editors: <dd class="editor p-author h-card vcard" data-editor-id="35400"><a class="p-name fn u-url url" href="http://fantasai.inkedblade.net/contact">Elika J. Etemad / fantasai</a> (Invited Expert) <dd class="editor p-author h-card vcard" data-editor-id="42199"><a class="p-name fn u-url url" href="http://xanthir.com/contact/">Tab Atkins</a> (Google) <dt class="editor">Former Editors: <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:ian@hixie.ch">Ian Hickson</a> (Google) <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:tantekc@microsoft.com">Tantek Çelik</a> (Formerly of Microsoft) <dt>Suggest an Edit for this Spec: <dd><a href="https://github.com/w3c/csswg-drafts/blob/master/css-lists-3/Overview.bs">GitHub Editor</a> <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> </dl> </div> <div data-fill-with="warning"></div> <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2020 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a>® (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document" rel="license">permissive document license</a> rules apply. <hr title="Separator for header"> </div> <div class="p-summary" data-fill-with="abstract"> <h2 class="no-num no-toc no-ref heading settled" id="abstract">Abstract</h2> This module contains CSS features related to list counters: styling them, positioning them, and manipulating their value. <a href="https://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, etc. </div> <h2 class="no-num no-toc no-ref heading settled" id="status">Status of this document</h2> <div data-fill-with="status"> This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the <a href="https://www.w3.org/TR/">W3C technical reports index at https://www.w3.org/TR/.</a> This document was published by the <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a> as a Working Draft. Publication as a Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress. Please send feedback by <a href="https://github.com/w3c/csswg-drafts/issues">filing issues in GitHub</a> (preferred), including the spec code “css-lists” in the title, like this: “[css-lists] …summary of comment…”. All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>. Alternately, feedback can be sent to the (<a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>) public mailing list <a href="mailto:www-style@w3.org?Subject=%5Bcss-lists%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a>. This document is governed by the <a href="https://www.w3.org/2020/Process-20200915/" id="w3c_process_revision">15 September 2020 W3C Process Document</a>. This document was produced by a group operating under the <a href="https://www.w3.org/Consortium/Patent-Policy-20170801/">W3C Patent Policy</a>. W3C maintains a <a href="https://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="https://www.w3.org/Consortium/Patent-Policy-20170801/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy-20170801/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </div> <div data-fill-with="at-risk"></div> <nav data-fill-with="table-of-contents" id="toc"> <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2> <ol class="toc" role="directory"> <li> <a href="#intro">1 Introduction</a> <ol class="toc"> <li><a href="#values">1.1 Value Definitions</a> </ol> <li><a href="#declaring-a-list-item">2 Declaring a List Item</a> <li> <a href="#markers">3 Markers</a> <ol class="toc"> <li> <a href="#marker-pseudo">3.1 The ::marker Pseudo-Element</a> <ol class="toc"> <li><a href="#marker-properties">3.1.1 Properties Applying to ::marker</a> </ol> <li><a href="#content-property">3.2 Generating Marker Contents</a> <li><a href="#image-markers">3.3 Image Markers: the list-style-image property</a> <li><a href="#text-markers">3.4 Text-based Markers: the list-style-type property</a> <li><a href="#list-style-position-property">3.5 Positioning Markers: The list-style-position property</a> <li><a href="#list-style-property">3.6 Styling Markers: the list-style shorthand property</a> <li><a href="#marker-side">3.7 The marker-side property</a> </ol> <li> <a href="#auto-numbering">4 Automatic Numbering With Counters</a> <ol class="toc"> <li><a href="#counter-reset">4.1 Creating Counters: the counter-reset property</a> <li><a href="#increment-set">4.2 Manipulating Counter Values: the counter-increment and counter-set properties</a> <li><a href="#nested-counters">4.3 Nested Counters and Scope</a> <li> <a href="#creating-counters">4.4 Creating and Inheriting Counters</a> <ol class="toc"> <li><a href="#inheriting-counters">4.4.1 Inheriting Counters</a> <li><a href="#instantiating-counters">4.4.2 Instantiating Counters</a> </ol> <li><a href="#counters-without-boxes">4.5 Counters in elements that do not generate boxes</a> <li><a href="#list-item-counter">4.6 The Implicit list-item Counter</a> <li><a href="#counter-functions">4.7 Outputting Counters: the counter() and counters() functions</a> </ol> <li><a href="#ua-stylesheet"> Appendix A: Sample Style Sheet For HTML</a> <li><a href="#acknowledgments"> Acknowledgments</a> <li> <a href="#changes"> Changes</a> <ol class="toc"> <li><a href="#changes-20200709"> Changes since the 9 July 2020 WD</a> <li><a href="#changes-20190817"> Changes since the 17 August 2019 WD</a> <li><a href="#changes-20190425"> Changes since the 25 April 2019 WD</a> <li><a href="#changes-20140320"> Changes since the 20 March 2014 WD</a> <li><a href="#changes-from-css2"> Changes From CSS Level 2</a> </ol> <li> <a href="#conformance"> Conformance</a> <ol class="toc"> <li><a href="#conventions"> Document conventions</a> <li><a href="#conformance-classes"> Conformance classes</a> <li> <a href="#partial"> Partial implementations</a> <ol class="toc"> <li><a href="#conform-future-proofing"> Implementations of Unstable and Proprietary Features</a> </ol> <li><a href="#testing"> Non-experimental implementations</a> </ol> <li> <a href="#index"> Index</a> <ol class="toc"> <li><a href="#index-defined-here"> Terms defined by this specification</a> <li><a href="#index-defined-elsewhere"> Terms defined by reference</a> </ol> <li> <a href="#references"> References</a> <ol class="toc"> <li><a href="#normative"> Normative References</a> <li><a href="#informative"> Informative References</a> </ol> <li><a href="#property-index"> Property Index</a> <li><a href="#issues-index"> Issues Index</a> </ol> </nav> <main> <h2 class="heading settled" data-level="1" id="intro">1. Introduction<a class="self-link" href="#intro"></a></h2> This specification defines the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker">::marker</a> pseudo-element, the <a class="css" data-link-type="maybe" href="#valdef-counter-increment-list-item" id="ref-for-valdef-counter-increment-list-item">list-item</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#display-type" id="ref-for-display-type">display type</a> that generates markers, and several properties controlling the placement and styling of markers. It also defines <a data-link-type="dfn" href="#counter" id="ref-for-counter">counters</a>, which are special numerical objects often used to generate the default contents of markers. <div class="example" id="example-f930c7d5"> <a class="self-link" href="#example-f930c7d5"></a> For instance, the following example illustrates how markers can be used to add parentheses around each numbered list item: <pre class="highlight"><c- p><</c-><c- f>style</c-><c- p>></c-> <c- f>li</c-><c- p>::</c-><c- nd>marker</c-> <c- p>{</c-> <c- k>content</c-><c- p>:</c-> <c- u>"("</c-> counter<c- p>(</c-><c- kc>list-item</c-><c- p>,</c-> <c- kc>lower-roman</c-><c- p>)</c-> <c- u>")"</c-><c- p>;</c-> <c- p>}</c-> <c- f>li</c-> <c- p>{</c-> <c- k>display</c-><c- p>:</c-> <c- kc>list-item</c-><c- p>;</c-> <c- p>}</c-> <c- p></</c-><c- f>style</c-><c- p>></c-> <c- p><</c-><c- f>ol</c-><c- p>></c-> <c- p><</c-><c- f>li</c-><c- p>></c->This is the first item. <c- p><</c-><c- f>li</c-><c- p>></c->This is the second item. <c- p><</c-><c- f>li</c-><c- p>></c->This is the third item. <c- p></</c-><c- f>ol</c-><c- p>></c-> </pre> It should produce something like this: <pre> (i) This is the first item. (ii) This is the second item. (iii) This is the third item. </pre> Note: Note that this example is far more verbose than is usually needed in HTML, as the UA default style sheet takes care of most of the necessary styling. </div> With descendant selectors and child selectors, it’s possible to specify different marker types depending on the depth of embedded lists. <h3 class="heading settled" data-level="1.1" id="values">1.1. Value Definitions<a class="self-link" href="#values"></a></h3> This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> using the <a href="https://www.w3.org/TR/css-values-3/#value-defs">value definition syntax</a> from <a data-link-type="biblio" href="#biblio-css-values-3">[CSS-VALUES-3]</a>. Value types not defined in this specification are defined in CSS Values & Units [CSS-VALUES-3]. Combination with other CSS modules may expand the definitions of these value types. In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#css-wide-keywords" id="ref-for-css-wide-keywords">CSS-wide keywords</a> as their property value. For readability they have not been repeated explicitly. <h2 class="heading settled" data-level="2" id="declaring-a-list-item">2. Declaring a List Item<a class="self-link" href="#declaring-a-list-item"></a></h2> A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="list-item">list item</dfn> is any element with its <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-display-3/#propdef-display" id="ref-for-propdef-display">display</a> property set to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-display-3/#valdef-display-list-item" id="ref-for-valdef-display-list-item">list-item</a>. <a data-link-type="dfn" href="#list-item" id="ref-for-list-item">List items</a> generate <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker①">::marker</a> pseudo-elements; no other elements do. Additionally, list items automatically increment an implied <a class="css" data-link-type="maybe" href="#valdef-counter-increment-list-item" id="ref-for-valdef-counter-increment-list-item①">list-item</a> <a data-link-type="dfn" href="#counter" id="ref-for-counter①">counter</a> (see <a href="#list-item-counter">§ 4.6 The Implicit list-item Counter</a>). <h2 class="heading settled" data-level="3" id="markers">3. Markers<a class="self-link" href="#markers"></a></h2> The defining feature of the <a data-link-type="dfn" href="#list-item" id="ref-for-list-item②">list item</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#display-type" id="ref-for-display-type①">display type</a> is its <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="marker | marker box" id="marker">marker</dfn>, a symbol or ordinal that helps denote the beginning of each list item in a list. In the CSS layout model, list item <a data-link-type="dfn" href="#marker" id="ref-for-marker">markers</a> are represented by a marker box associated with each list item. The contents of this marker can be controlled with the <a class="property" data-link-type="propdesc" href="#propdef-list-style-type" id="ref-for-propdef-list-style-type">list-style-type</a> and <a class="property" data-link-type="propdesc" href="#propdef-list-style-image" id="ref-for-propdef-list-style-image">list-style-image</a> properties on the list item and by assigning properties to its <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker②">::marker</a> pseudo-element. <h3 class="heading settled" data-level="3.1" id="marker-pseudo">3.1. The <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker③">::marker</a> Pseudo-Element<a class="self-link" href="#marker-pseudo"></a></h3> The <a data-link-type="dfn" href="#marker" id="ref-for-marker③">marker box</a> is generated by the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker④">::marker</a> pseudo-element of a <a data-link-type="dfn" href="#list-item" id="ref-for-list-item⑦">list item</a> as the list item’s first child, before the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-before" id="ref-for-selectordef-before">::before</a> pseudo-element (if it exists on the element). It is filled with content as defined in <a href="#content-property">§ 3.2 Generating Marker Contents</a>. <div class="example" id="example-062e4ca0"> <a class="self-link" href="#example-062e4ca0"></a> In this example, markers are used to number paragraphs that are designated as "notes": <pre class="highlight"><c- p><</c-><c- f>style</c-><c- p>></c-> <c- f>p</c-> <c- p>{</c-> <c- k>margin-left</c-><c- p>:</c-> <c- mi>12</c-> <c- n>em</c-><c- p>;</c-> <c- p>}</c-> <c- f>p</c-><c- p>.</c-><c- nc>note</c-> <c- p>{</c-> <c- k>display</c-><c- p>:</c-> <c- kc>list-item</c-><c- p>;</c-> <c- k>counter-increment</c-><c- p>:</c-> <c- n>note-counter</c-><c- p>;</c-> <c- p>}</c-> <c- f>p</c-><c- p>.</c-><c- nc>note</c-><c- p>::</c-><c- nd>marker</c-> <c- p>{</c-> <c- k>content</c-><c- p>:</c-> <c- u>"Note "</c-> counter<c- p>(</c-><c- n>note</c-><c- o>-</c-><c- n>counter</c-><c- p>)</c-> <c- u>":"</c-><c- p>;</c-> <c- p>}</c-> <c- p></</c-><c- f>style</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>></c->This is the first paragraph in this document. <c- p><</c-><c- f>p</c-> <c- e>class</c-><c- o>=</c-><c- s>"note"</c-><c- p>></c->This is a very short document. <c- p><</c-><c- f>p</c-><c- p>></c->This is the end. </pre> It should render something like this: <pre> This is the first paragraph in this document. Note 1: This is a very short document. This is the end. </pre> </div> <div class="example" id="example-203ca64c"> <a class="self-link" href="#example-203ca64c"></a> By using the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker⑤">::marker</a> pseudo-element, a list’s markers can be styled independently from the text of the list item itself: <pre class="highlight"><c- p><</c-><c- f>style</c-><c- p>></c-> <c- f>p</c-> <c- p>{</c-> <c- k>margin-left</c-><c- p>:</c-> <c- mi>8</c-><c- b>em</c-> <c- p>}</c-> <c- c>/* Make space for counters */</c-> <c- f>li</c-> <c- p>{</c-> <c- k>list-style-type</c-><c- p>:</c-> <c- kc>lower-roman</c-><c- p>;</c-> <c- p>}</c-> <c- f>li</c-><c- p>::</c-><c- nd>marker</c-> <c- p>{</c-> <c- k>color</c-><c- p>:</c-> <c- kc>blue</c-><c- p>;</c-> <c- k>font-weight</c-><c- p>:</c-><c- kc>bold</c-><c- p>;</c-> <c- p>}</c-> <c- p></</c-><c- f>style</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>></c->This is a long preceding paragraph ... <c- p><</c-><c- f>ol</c-><c- p>></c-> <c- p><</c-><c- f>li</c-><c- p>></c->This is the first item. <c- p><</c-><c- f>li</c-><c- p>></c->This is the second item. <c- p><</c-><c- f>li</c-><c- p>></c->This is the third item. <c- p></</c-><c- f>ol</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>></c->This is a long following paragraph ... </pre> The preceding document should render something like this: <pre> 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 ... </pre> Previously the only way to style a marker was through inheritance; one had to put the desired marker styling on the list item, and then revert that on a wrapper element around the list item’s actual contents. </div> <a data-link-type="dfn" href="#marker" id="ref-for-marker④">Marker boxes</a> only exist for <a data-link-type="dfn" href="#list-item" id="ref-for-list-item⑨">list items</a>: on any other element, the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker⑥">::marker</a> pseudo-element’s <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-content-3/#propdef-content" id="ref-for-propdef-content">content</a> property must compute to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-content-3/#valdef-content-none" id="ref-for-valdef-content-none">none</a>, which suppresses its creation. <h4 class="heading settled" data-level="3.1.1" id="marker-properties">3.1.1. Properties Applying to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker⑦">::marker</a><a class="self-link" href="#marker-properties"></a></h4> All properties can be set on a <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker⑧">::marker</a> pseudo-element and will have a <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-4/#computed-value" id="ref-for-computed-value">computed value</a>; however, only the following CSS properties actually apply to a <a data-link-type="dfn" href="#marker" id="ref-for-marker⑤">marker box</a>: <ul> <li>the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-writing-modes-4/#propdef-text-combine-upright" id="ref-for-propdef-text-combine-upright">text-combine-upright</a>, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi">unicode-bidi</a>, and <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction">direction</a> properties (see <a data-link-type="biblio" href="#biblio-css-writing-modes-3">[CSS-WRITING-MODES-3]</a>) <li>the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-content-3/#propdef-content" id="ref-for-propdef-content①">content</a> property (see <a href="#content-property">§ 3.2 Generating Marker Contents</a>, below) <li>all animation and transition properties (see <a data-link-type="biblio" href="#biblio-css-animations-1">[CSS-ANIMATIONS-1]</a> and <a data-link-type="biblio" href="#biblio-css-transitions-1">[CSS-TRANSITIONS-1]</a>) </ul> It is expected that future specifications will extend this list of properties; however at the moment outside marker box layout is not fully defined, so only these properties are allowed. Other properties must not have an effect on the <a data-link-type="dfn" href="#marker" id="ref-for-marker⑥">marker box</a> when set in the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-4/#cascade-origin-author" id="ref-for-cascade-origin-author">author origin</a> of the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-4/#cascade" id="ref-for-cascade">cascade</a>. UAs may either treat such properties as not applying, or enforce their value by setting a <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-4/#cascade-origin-ua" id="ref-for-cascade-origin-ua">user-agent origin</a> !important rule. However, inheritable properties that apply to text can be set on the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker⑨">::marker</a> pseudo-element: these will inherit to and take effect on its text contents. <div class="example" id="example-6b44c445"> <a class="self-link" href="#example-6b44c445"></a> Examples of properties that apply to text, and therefore to the contents of <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker①⓪">::marker</a> when declared on ::marker: <ul> <li><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#propdef-white-space" id="ref-for-propdef-white-space">white-space</a>, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#propdef-text-transform" id="ref-for-propdef-text-transform">text-transform</a>, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#propdef-letter-spacing" id="ref-for-propdef-letter-spacing">letter-spacing</a> (see <a data-link-type="biblio" href="#biblio-css-text-3">[CSS-TEXT-3]</a>) <li>all font properties (see <a data-link-type="biblio" href="#biblio-css-fonts-3">[CSS-FONTS-3]</a> and its successors) <li>the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-color-4/#propdef-color" id="ref-for-propdef-color">color</a> property (see <a data-link-type="biblio" href="#biblio-css-color-3">[CSS-COLOR-3]</a>) </ul> </div> UAs must add the following rule to their default style sheet: <pre>::marker, ::before::marker, ::after::marker { unicode-bidi: isolate; font-variant-numeric: tabular-nums; white-space: pre; text-transform: none; } </pre> Note: Although the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker①②">::marker</a> pseudo-element can represent the <a data-link-type="dfn" href="#marker" id="ref-for-marker⑦">marker box</a> of a <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-before" id="ref-for-selectordef-before①">::before</a> or <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-after" id="ref-for-selectordef-after">::after</a> pseudo-element, the <a data-link-type="dfn" href="https://www.w3.org/TR/selectors-4/#compound" id="ref-for-compound">compound selector</a> ::marker, which expands to *::marker <a data-link-type="biblio" href="#biblio-selectors-4">[SELECTORS-4]</a>, will not select these markers—an <a data-link-type="dfn" href="https://www.w3.org/TR/selectors-4/#originating-element" id="ref-for-originating-element">originating element</a> that is a <a data-link-type="dfn" href="https://www.w3.org/TR/selectors-4/#pseudo-element" id="ref-for-pseudo-element">pseudo-element</a> needs to be explicitly specified in the <a data-link-type="dfn" href="https://www.w3.org/TR/selectors-4/#selector" id="ref-for-selector">selector</a>, e.g. ::before::marker. <a class="self-link" href="#issue-04da870c"></a> <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#propdef-white-space" id="ref-for-propdef-white-space①">white-space: pre</a> doesn’t have quite the right behavior; <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-4/#propdef-text-space-collapse" id="ref-for-propdef-text-space-collapse">text-space-collapse: preserve-spaces</a> + <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-4/#propdef-text-space-trim" id="ref-for-propdef-text-space-trim">text-space-trim: discard-after</a> might be closer to what’s needed here. See discussion in <a href="https://github.com/w3c/csswg-drafts/issues/4448">Issue 4448</a> and <a href="https://github.com/w3c/csswg-drafts/issues/4891">Issue 4891</a>. <h3 class="heading settled" data-level="3.2" id="content-property">3.2. Generating Marker Contents<a class="self-link" href="#content-property"></a></h3> The contents of a <a data-link-type="dfn" href="#marker" id="ref-for-marker⑧">marker box</a> are determined by the first of these conditions that is true: <dl class="switch"> <dt><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-content-3/#propdef-content" id="ref-for-propdef-content②">content</a> on the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker①④">::marker</a> itself is not <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-content-3/#valdef-content-normal" id="ref-for-valdef-content-normal">normal</a> <dd> The contents of the <a data-link-type="dfn" href="#marker" id="ref-for-marker⑨">marker box</a> are determined as defined by the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-content-3/#propdef-content" id="ref-for-propdef-content③">content</a> property, exactly as for <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-before" id="ref-for-selectordef-before②">::before</a>. <dt><a class="property" data-link-type="propdesc" href="#propdef-list-style-image" id="ref-for-propdef-list-style-image①">list-style-image</a> on the <a data-link-type="dfn" href="https://www.w3.org/TR/selectors-4/#originating-element" id="ref-for-originating-element①">originating element</a> defines a <a data-link-type="dfn" href="#marker-image" id="ref-for-marker-image">marker image</a> <dd> The '<a data-link-type="dfn" href="#marker" id="ref-for-marker①⓪">marker box</a> contains an <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#anonymous" id="ref-for-anonymous">anonymous</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline" id="ref-for-inline">inline</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#replaced-element" id="ref-for-replaced-element">replaced element</a> representing the specified <a data-link-type="dfn" href="#marker-image" id="ref-for-marker-image①">marker image</a>, followed by a <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#text-run" id="ref-for-text-run">text run</a> consisting of a single space (U+0020 SPACE). <dt><a class="property" data-link-type="propdesc" href="#propdef-list-style-type" id="ref-for-propdef-list-style-type①">list-style-type</a> on the <a data-link-type="dfn" href="https://www.w3.org/TR/selectors-4/#originating-element" id="ref-for-originating-element②">originating element</a> defines a <a data-link-type="dfn" href="#marker-string" id="ref-for-marker-string">marker string</a> <dd> The <a data-link-type="dfn" href="#marker" id="ref-for-marker①①">marker box</a> contains a <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#text-run" id="ref-for-text-run①">text run</a> consisting of the specified <a data-link-type="dfn" href="#marker-string" id="ref-for-marker-string①">marker string</a>. <dt>otherwise <dd> The <a data-link-type="dfn" href="#marker" id="ref-for-marker①②">marker box</a> has no contents and <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker①⑤">::marker</a> does not generate a box. </dl> Additionally, the UA may transform into spaces or discard any preserved <a data-link-type="dfn" href="https://www.w3.org/TR/css-text-3/#forced-line-break" id="ref-for-forced-line-break">forced line breaks</a>. <h3 class="heading settled" data-level="3.3" id="image-markers">3.3. Image Markers: the <a class="property" data-link-type="propdesc" href="#propdef-list-style-image" id="ref-for-propdef-list-style-image②">list-style-image</a> property<a class="self-link" href="#image-markers"></a></h3> <table class="def propdef" data-link-for-hint="list-style-image"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-list-style-image">list-style-image</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-images-3/#typedef-image" id="ref-for-typedef-image"><image></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one">|</a> none <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>none <tr> <th>Applies to: <td><a data-link-type="dfn" href="#list-item" id="ref-for-list-item①⓪">list items</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>yes <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>the keyword <a class="css" data-link-type="maybe" href="#valdef-list-style-image-none" id="ref-for-valdef-list-style-image-none">none</a>or the computed <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-images-3/#typedef-image" id="ref-for-typedef-image①"><image></a> <tr> <th>Canonical order: <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete </table> Specifies the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="marker-image">marker image</dfn>, which is used to fill the <a data-link-type="dfn" href="#list-item" id="ref-for-list-item①①">list item’s</a> <a data-link-type="dfn" href="#marker" id="ref-for-marker①③">marker</a> when its <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-content-3/#propdef-content" id="ref-for-propdef-content④">content</a> is <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-content-3/#valdef-content-normal" id="ref-for-valdef-content-normal①">normal</a>. The values are as follows: <dl> <dt><dfn class="css" data-dfn-for="list-style-image" data-dfn-type="value" data-export id="valdef-list-style-image-image"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-images-3/#typedef-image" id="ref-for-typedef-image②"><image></a><a class="self-link" href="#valdef-list-style-image-image"></a></dfn> <dd> If the <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-images-3/#typedef-image" id="ref-for-typedef-image③"><image></a> represents a <a data-link-type="dfn" href="https://www.w3.org/TR/css-images-4/#invalid-image" id="ref-for-invalid-image">valid image</a>, specifies the element’s <a data-link-type="dfn" href="#marker-image" id="ref-for-marker-image②">marker image</a> as the <image>. Otherwise, the element has no marker image. <dt><dfn class="dfn-paneled css" data-dfn-for="list-style-image" data-dfn-type="value" data-export id="valdef-list-style-image-none">none</dfn> <dd> The element has no <a data-link-type="dfn" href="#marker-image" id="ref-for-marker-image④">marker image</a>. </dl> <div class="example" id="example-f0b1fc19"> <a class="self-link" href="#example-f0b1fc19"></a> The following example sets the marker at the beginning of each list item to be the image "ellipse.png". <pre class="highlight">li <c- p>{</c-> <c- k>list-style-image</c-><c- p>:</c-> <c- nf>url</c-><c- p>(</c-><c- s>"http://www.example.com/ellipse.png"</c-><c- p>)</c-> <c- p>}</c-></pre> </div> <h3 class="heading settled" data-level="3.4" id="text-markers">3.4. Text-based Markers: the <a class="property" data-link-type="propdesc" href="#propdef-list-style-type" id="ref-for-propdef-list-style-type②">list-style-type</a> property<a class="self-link" href="#text-markers"></a></h3> <table class="def propdef" data-link-for-hint="list-style-type"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-list-style-type">list-style-type</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style" title="Expands to: cjk-ideographic | japanese-formal | japanese-informal | simp-chinese-formal | simp-chinese-informal | trad-chinese-formal | trad-chinese-informal"><counter-style></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-3/#string-value" id="ref-for-string-value"><string></a> | none <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>disc <tr> <th>Applies to: <td><a data-link-type="dfn" href="#list-item" id="ref-for-list-item①②">list items</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>yes <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>specified value <tr> <th>Canonical order: <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete </table> Specifies the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="marker-string">marker string</dfn>, which is used to fill the <a data-link-type="dfn" href="#list-item" id="ref-for-list-item①③">list item</a>’s <a data-link-type="dfn" href="#marker" id="ref-for-marker①④">marker</a> when its <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-content-3/#propdef-content" id="ref-for-propdef-content⑤">content</a> value is <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-content-3/#valdef-content-normal" id="ref-for-valdef-content-normal②">normal</a> and there is no <a data-link-type="dfn" href="#marker-image" id="ref-for-marker-image⑤">marker image</a>. The values are as follows: <dl> <dt><dfn class="css" data-dfn-for="list-style-type" data-dfn-type="value" data-export id="valdef-list-style-type-counter-style"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style①" title="Expands to: cjk-ideographic | japanese-formal | japanese-informal | simp-chinese-formal | simp-chinese-informal | trad-chinese-formal | trad-chinese-informal"><counter-style></a><a class="self-link" href="#valdef-list-style-type-counter-style"></a></dfn> <dd> Specifies the element’s <a data-link-type="dfn" href="#marker-string" id="ref-for-marker-string②">marker string</a> as the value of the <a class="css" data-link-type="maybe" href="#valdef-counter-increment-list-item" id="ref-for-valdef-counter-increment-list-item②">list-item</a> counter represented using the specified <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style②" title="Expands to: cjk-ideographic | japanese-formal | japanese-informal | simp-chinese-formal | simp-chinese-informal | trad-chinese-formal | trad-chinese-informal"><counter-style></a>. Specifically, the <a data-link-type="dfn" href="#marker-string" id="ref-for-marker-string③">marker string</a> is the result of <a data-link-type="dfn" href="https://www.w3.org/TR/css-counter-styles-3/#generate-a-counter" id="ref-for-generate-a-counter">generating a counter representation</a> of the <a class="css" data-link-type="maybe" href="#valdef-counter-increment-list-item" id="ref-for-valdef-counter-increment-list-item③">list-item</a> counter value using the specified <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style③" title="Expands to: cjk-ideographic | japanese-formal | japanese-informal | simp-chinese-formal | simp-chinese-informal | trad-chinese-formal | trad-chinese-informal"><counter-style></a>, prefixed by the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-counter-styles-3/#descdef-counter-style-prefix" id="ref-for-descdef-counter-style-prefix">prefix</a> of the <span class="production" id="ref-for-typedef-counter-style④" title="Expands to: cjk-ideographic | japanese-formal | japanese-informal | simp-chinese-formal | simp-chinese-informal | trad-chinese-formal | trad-chinese-informal"><counter-style>, and followed by the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-counter-styles-3/#descdef-counter-style-suffix" id="ref-for-descdef-counter-style-suffix">suffix</a> of the <span class="production" id="ref-for-typedef-counter-style⑤" title="Expands to: cjk-ideographic | japanese-formal | japanese-informal | simp-chinese-formal | simp-chinese-informal | trad-chinese-formal | trad-chinese-informal"><counter-style>. If the specified <span class="production" id="ref-for-typedef-counter-style⑥" title="Expands to: cjk-ideographic | japanese-formal | japanese-informal | simp-chinese-formal | simp-chinese-informal | trad-chinese-formal | trad-chinese-informal"><counter-style> does not exist, <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-counter-styles-3/#decimal" id="ref-for-decimal">decimal</a> is assumed. <dt><dfn class="css" data-dfn-for="list-style-type" data-dfn-type="value" data-export id="valdef-list-style-type-string"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-3/#string-value" id="ref-for-string-value①"><string></a><a class="self-link" href="#valdef-list-style-type-string"></a></dfn> <dd> The element’s <a data-link-type="dfn" href="#marker-string" id="ref-for-marker-string④">marker string</a> is the specified <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-3/#string-value" id="ref-for-string-value②"><string></a>. <dt><dfn class="css" data-dfn-for="list-style-type" data-dfn-type="value" data-export id="valdef-list-style-type-none">none<a class="self-link" href="#valdef-list-style-type-none"></a></dfn> <dd> The element has no <a data-link-type="dfn" href="#marker-string" id="ref-for-marker-string⑤">marker string</a>. </dl> <div class="example" id="example-6484e67f"> <a class="self-link" href="#example-6484e67f"></a> The following examples illustrate how to set markers to various values: <pre class="highlight">ul <c- p>{</c-> <c- k>list-style-type</c-><c- p>:</c-> <c- s>"★"</c-><c- p>;</c-> <c- p>}</c-> <c- c>/* Sets the marker to a "star" character */</c-> p.note <c- p>{</c-> <c- k>display</c-><c- p>:</c-> list-item<c- p>;</c-> <c- k>list-style-type</c-><c- p>:</c-> <c- s>"Note: "</c-><c- p>;</c-> <c- k>list-style-position</c-><c- p>:</c-> inside<c- p>;</c-> <c- p>}</c-> <c- c>/* Gives note paragraphs a marker consisting of the string "Note: " */</c-> ol <c- p>{</c-> <c- k>list-style-type</c-><c- p>:</c-> upper-roman<c- p>;</c-> <c- p>}</c-> <c- c>/* Sets all ordered lists to use the upper-roman counter-style</c-> <c- c> (defined in the Counter Styles specification [[CSS-COUNTER-STYLES]]) */</c-> ul <c- p>{</c-> <c- k>list-style-type</c-><c- p>:</c-> <c- nf>symbols</c-><c- p>(</c->cyclic <c- s>'○'</c-> <c- s>'●'</c-><c- p>);</c-> <c- p>}</c-> <c- c>/* Sets all unordered list items to alternate between empty and</c-> <c- c> filled circles for their markers. */</c-> ul <c- p>{</c-> <c- k>list-style-type</c-><c- p>:</c-> none<c- p>;</c-> <c- p>}</c-> <c- c>/* Suppresses the marker entirely, unless list-style-image is specified</c-> <c- c> with a valid image. */</c-> </pre> </div> <h3 class="heading settled" data-level="3.5" id="list-style-position-property">3.5. Positioning Markers: The <a class="property" data-link-type="propdesc" href="#propdef-list-style-position" id="ref-for-propdef-list-style-position">list-style-position</a> property<a class="self-link" href="#list-style-position-property"></a></h3> <table class="def propdef" data-link-for-hint="list-style-position"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-list-style-position">list-style-position</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">inside <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one③">|</a> outside <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>outside <tr> <th>Applies to: <td><a data-link-type="dfn" href="#list-item" id="ref-for-list-item①④">list items</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>yes <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>keyword, but see prose <tr> <th>Canonical order: <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete </table> This property dictates whether the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker①⑥">::marker</a> is rendered inline, or positioned just outside of the <a data-link-type="dfn" href="#list-item" id="ref-for-list-item①⑤">list item</a>. The values are as follows: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="list-style-position" data-dfn-type="value" data-export id="valdef-list-style-position-inside">inside</dfn> <dd> No special effect. (The <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker①⑦">::marker</a> is an inline element at the start of the <a data-link-type="dfn" href="#list-item" id="ref-for-list-item①⑥">list item’s</a> contents.) <dt><dfn class="dfn-paneled css" data-dfn-for="list-style-position" data-dfn-type="value" data-export id="list-style-position-outside">outside</dfn> <dd> If the <a data-link-type="dfn" href="#list-item" id="ref-for-list-item①⑦">list item</a> is a <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#block-container" id="ref-for-block-container">block container</a>: the marker box is a block container and is placed outside the <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#principal-box" id="ref-for-principal-box">principal block box</a>; however, the position of the list-item marker adjacent to floats is undefined. CSS does not specify the precise location of the marker box or its position in the painting order, but does require that it be placed on the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#inline-start" id="ref-for-inline-start">inline-start</a> side of the box, using the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode">writing mode</a> of the box indicated by <a class="property" data-link-type="propdesc" href="#propdef-marker-side" id="ref-for-propdef-marker-side">marker-side</a>. The marker box is fixed with respect to the principal block box’s border and does not scroll with the principal box’s content. A UA may hide the marker if the element’s <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow">overflow</a> is other than <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-visible" id="ref-for-valdef-overflow-visible">visible</a>. (This allowance may change in the future.) The size or contents of the marker box may affect the height of the principal block box and/or the height of its first line box, and in some cases may cause the creation of a new line box; this interaction is also not defined. <a class="self-link" href="#issue-ffa70ac6"></a> This is handwavey nonsense from CSS2, and needs a real definition. If the <a data-link-type="dfn" href="#list-item" id="ref-for-list-item①⑧">list item</a> is an <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box">inline box</a>: this value is equivalent to <a class="css" data-link-type="maybe" href="#valdef-list-style-position-inside" id="ref-for-valdef-list-style-position-inside">inside</a>. <a class="self-link" href="#issue-bf311ada"></a> Alternatively, <a class="css" data-link-type="maybe" href="#list-style-position-outside" id="ref-for-list-style-position-outside">outside</a> could lay out the marker as a previous sibling of the principal inline box. </dl> <div class="example" id="example-b050971d"> <a class="self-link" href="#example-b050971d"></a> For example: <pre><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> </pre> The above example may be formatted as: <pre> * first "inside" list item comes first * second "inside" list item comes second ======================== * first "outside" list item comes first * second "outside" list item comes second</pre> </div> <h3 class="heading settled" data-level="3.6" id="list-style-property">3.6. Styling Markers: the <a class="property" data-link-type="propdesc" href="#propdef-list-style" id="ref-for-propdef-list-style">list-style</a> shorthand property<a class="self-link" href="#list-style-property"></a></h3> <table class="def propdef" data-link-for-hint="list-style"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-list-style">list-style</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-list-style-position" id="ref-for-propdef-list-style-position①"><'list-style-position'></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-any" id="ref-for-comb-any">||</a> <a class="production" data-link-type="propdesc" href="#propdef-list-style-image" id="ref-for-propdef-list-style-image③"><'list-style-image'></a> || <a class="production" data-link-type="propdesc" href="#propdef-list-style-type" id="ref-for-propdef-list-style-type③"><'list-style-type'></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>see individual properties <tr> <th>Applies to: <td><a data-link-type="dfn" href="#list-item" id="ref-for-list-item①⑨">list items</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>see individual properties <tr> <th>Canonical order: <td>per grammar </table> The <a class="property" data-link-type="propdesc" href="#propdef-list-style" id="ref-for-propdef-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" id="ref-for-propdef-list-style-type④">list-style-type</a>, <a class="property" data-link-type="propdesc" href="#propdef-list-style-image" id="ref-for-propdef-list-style-image④">list-style-image</a>, and <a class="property" data-link-type="propdesc" href="#propdef-list-style-position" id="ref-for-propdef-list-style-position②">list-style-position</a> at the same place in the style sheet. <div class="example" id="example-7bda667c"> <a class="self-link" href="#example-7bda667c"></a> For example: <pre class="highlight">ul <c- p>{</c-> <c- k>list-style</c-><c- p>:</c-> upper-roman inside <c- p>}</c-> <c- c>/* Any UL */</c-> ul ul <c- p>{</c-> <c- k>list-style</c-><c- p>:</c-> circle outside <c- p>}</c-> <c- c>/* Any UL child of a UL */</c-> </pre> </div> Using a value of none in the shorthand is potentially ambiguous, as none is a valid value for both <a class="property" data-link-type="propdesc" href="#propdef-list-style-image" id="ref-for-propdef-list-style-image⑤">list-style-image</a> and <a class="property" data-link-type="propdesc" href="#propdef-list-style-type" id="ref-for-propdef-list-style-type⑤">list-style-type</a>. To resolve this ambiguity, a value of none in the shorthand must be applied to whichever of the two properties aren’t otherwise set by the shorthand. <div class="example" id="example-4ba742b8"> <a class="self-link" href="#example-4ba742b8"></a> <pre class="highlight"><c- k>list-style</c-><c- p>:</c-> none disc<c- p>;</c-> <c- c>/* Sets the image to "none" and the type to "disc". */</c-> list-style: none <c- nf>url</c-><c- p>(</c-><c- s>bullet.png</c-><c- p>);</c-> <c- c>/* Sets the image to "url(bullet.png)" and the type to "none". */</c-> list-style: none<c- p>;</c-> <c- c>/* Sets both image and type to "none". */</c-> list-style: none disc <c- nf>url</c-><c- p>(</c-><c- s>bullet.png</c-><c- p>);</c-> <c- c>/* Syntax error */</c-> </pre> </div> Note: The <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style⑦" title="Expands to: cjk-ideographic | japanese-formal | japanese-informal | simp-chinese-formal | simp-chinese-informal | trad-chinese-formal | trad-chinese-informal"><counter-style></a> values of <a class="property" data-link-type="propdesc" href="#propdef-list-style-type" id="ref-for-propdef-list-style-type⑥">list-style-type</a> can also create grammatical ambiguities. As such values are ultimately <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#identifier-value" id="ref-for-identifier-value"><custom-ident></a> values, the parsing rules in <a data-link-type="biblio" href="#biblio-css-values-3">[CSS-VALUES-3]</a> apply. <div class="example" id="example-4d590fca"> <a class="self-link" href="#example-4d590fca"></a> Although authors may specify <a class="property" data-link-type="propdesc" href="#propdef-list-style" id="ref-for-propdef-list-style②">list-style</a> information directly on list item elements (e.g., <code class="highlight"><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element" id="ref-for-the-li-element">li</a></code> in HTML), they should do so with care. Consider the following rules: <pre class="highlight">ol.alpha li <c- p>{</c-> <c- k>list-style</c-><c- p>:</c-> lower-alpha<c- p>;</c-> <c- p>}</c-> ul li <c- p>{</c-> <c- k>list-style</c-><c- p>:</c-> disc<c- p>;</c-> <c- p>}</c-> </pre> The above won’t work as expected. If you nest a <code class="highlight"><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element" id="ref-for-the-ul-element">ul</a></code> into an <a data-link-type="element" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-ol-element" id="ref-for-the-ol-element">ol class=alpha</a>, the first rule’s specificity will make the <code class="highlight"><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element" id="ref-for-the-ul-element①">ul</a></code>’s list items use the lower-alpha style. <pre class="highlight">ol.alpha > li <c- p>{</c-> <c- k>list-style</c-><c- p>:</c-> lower-alpha<c- p>;</c-> <c- p>}</c-> ul > li <c- p>{</c-> <c- k>list-style</c-><c- p>:</c-> disc<c- p>;</c-> <c- p>}</c-> </pre> These work as intended. <pre class="highlight">ol.alpha <c- p>{</c-> <c- k>list-style</c-><c- p>:</c-> lower-alpha<c- p>;</c-> <c- p>}</c-> ul <c- p>{</c-> <c- k>list-style</c-><c- p>:</c-> disc<c- p>;</c-> <c- p>}</c-> </pre> These are even better, since inheritance will transfer the <a class="property" data-link-type="propdesc" href="#propdef-list-style" id="ref-for-propdef-list-style③">list-style</a> value to the list items. </div> <h3 class="heading settled" data-level="3.7" id="marker-side">3.7. The <a class="property" data-link-type="propdesc" href="#propdef-marker-side" id="ref-for-propdef-marker-side①">marker-side</a> property<a class="self-link" href="#marker-side"></a></h3> <table class="def propdef" data-link-for-hint="marker-side"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-marker-side">marker-side</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">match-self <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one④">|</a> match-parent <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>match-self <tr> <th>Applies to: <td><a data-link-type="dfn" href="#list-item" id="ref-for-list-item②⓪">list items</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>yes <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>specified keyword <tr> <th>Canonical order: <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete </table> The <a class="property" data-link-type="propdesc" href="#propdef-marker-side" id="ref-for-propdef-marker-side②">marker-side</a> property specifies whether an <a class="css" data-link-type="maybe" href="#list-style-position-outside" id="ref-for-list-style-position-outside①">outside</a> <a data-link-type="dfn" href="#marker" id="ref-for-marker①⑤">marker box</a> is positioned based on the directionality of the list item itself (i.e. its <a data-link-type="dfn" href="https://www.w3.org/TR/selectors-4/#originating-element" id="ref-for-originating-element③">originating element</a>) or the directionality of the list container (i.e. the originating element’s parent). In the first case, the position of the marker can vary across items in the same list, based on the directionality assigned to each list item individually; in the second case they will all align on the same side, as determined by the directionality assigned to the list as a whole. <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="marker-side" data-dfn-type="value" data-export id="valdef-marker-side-match-self">match-self</dfn> <dd> The <a data-link-type="dfn" href="#marker" id="ref-for-marker①⑥">marker box</a> is positioned using the directionality of the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker①⑧">::marker</a>’s <a data-link-type="dfn" href="https://www.w3.org/TR/selectors-4/#originating-element" id="ref-for-originating-element⑤">originating element</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="marker-side" data-dfn-type="value" data-export id="valdef-marker-side-match-parent">match-parent</dfn> <dd> The <a data-link-type="dfn" href="#marker" id="ref-for-marker①⑦">marker box</a> is positioned using the directionality of the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker①⑨">::marker</a>’s <a data-link-type="dfn" href="https://www.w3.org/TR/selectors-4/#originating-element" id="ref-for-originating-element⑥">originating element’s</a> parent element. </dl> <div class="example" id="example-305896a3"> <a class="self-link" href="#example-305896a3"></a> By default, elements or <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker②⓪">::marker</a> pseudo-elements position themselves according to their list item’s directionality. However, if the list item is grouped with several other list items which may have different directionality (for example, multiple <li>s with different "dir" attributes in an <ol> in HTML), it is sometimes more useful to have all the markers line up on one side, so the author can specify a single "gutter" on that side and be assured that all the markers will lie in that gutter and be visible. 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" id="ref-for-propdef-marker-side③">marker-side</a> on the list: <pre class="highlight"><c- p><</c-><c- f>ul</c-><c- p>></c-> <c- p><</c-><c- f>li</c-><c- p>></c->english one <c- p><</c-><c- f>li</c-> <c- e>dir</c-><c- o>=</c-><c- s>rtl</c-><c- p>></c->OWT WERBEH <c- p><</c-><c- f>li</c-><c- p>></c->english three <c- p><</c-><c- f>li</c-> <c- e>dir</c-><c- o>=</c-><c- s>rtl</c-><c- p>></c->RUOF WERBEH <c- p></</c-><c- f>ul</c-><c- p>></c-> </pre> <table class="data" style="width: 35em;"> <thead> <tr> <th><a class="css" data-link-type="maybe" href="#valdef-marker-side-match-self" id="ref-for-valdef-marker-side-match-self">match-self</a> <th><a class="css" data-link-type="maybe" href="#valdef-marker-side-match-parent" id="ref-for-valdef-marker-side-match-parent">match-parent</a> <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> <a class="self-link" href="#issue-91830b42"></a> For this order punctuation inside the marker correctly, it would also need to take the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction①">direction</a> value of the parent. <a href="https://github.com/w3c/csswg-drafts/issues/4202"><https://github.com/w3c/csswg-drafts/issues/4202></a> <a class="self-link" href="#issue-69d20ea1"></a> There are issues open on <a href="https://github.com/w3c/csswg-drafts/issues/5308">renaming the keywords</a> and on <a href="https://github.com/w3c/csswg-drafts/issues/4209">merging with list-style-position</a>. <h2 class="heading settled" data-level="4" id="auto-numbering">4. Automatic Numbering With Counters<a class="self-link" href="#auto-numbering"></a></h2> A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="counter">counter</dfn> is a special numeric tracker 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. <a data-link-type="dfn" href="#counter" id="ref-for-counter②">Counters</a> have a <dfn class="dfn-paneled" data-dfn-for="CSS counter" data-dfn-type="dfn" data-export id="css-counter-name">name</dfn> and <dfn class="dfn-paneled" data-dfn-for="CSS counter" data-dfn-type="dfn" data-export id="css-counter-creator">creator</dfn>, which identify the counter, and an integer <dfn class="dfn-paneled" data-dfn-for="CSS counter" data-dfn-type="dfn" data-export id="css-counter-value">value</dfn>. They are created and manipulated with the <dfn data-dfn-type="dfn" data-export id="counter-properties">counter properties<a class="self-link" href="#counter-properties"></a></dfn> <a class="property" data-link-type="propdesc" href="#propdef-counter-increment" id="ref-for-propdef-counter-increment">counter-increment</a>, <a class="property" data-link-type="propdesc" href="#propdef-counter-set" id="ref-for-propdef-counter-set">counter-set</a> and <a class="property" data-link-type="propdesc" href="#propdef-counter-reset" id="ref-for-propdef-counter-reset">counter-reset</a>, and used with the <a class="css" data-link-type="maybe" href="#funcdef-counter" id="ref-for-funcdef-counter">counter()</a> and <a class="css" data-link-type="maybe" href="#funcdef-counters" id="ref-for-funcdef-counters">counters()</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#functional-notation" id="ref-for-functional-notation">functional notations</a>. Counters are referred to in CSS syntax using the <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-counter-name"><a class="production css" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name"><counter-name></a></dfn> type, which represents their name as a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#identifier-value" id="ref-for-identifier-value①"><custom-ident></a>. A <a class="production css" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name①"><counter-name></a> name cannot match the keyword <a class="css" data-link-type="maybe" href="#valdef-counter-reset-none" id="ref-for-valdef-counter-reset-none">none</a>; such an identifier is <a data-link-type="dfn" href="https://www.w3.org/TR/css-syntax-3/#css-invalid" id="ref-for-css-invalid">invalid</a> as a <counter-name>. Resolving <a data-link-type="dfn" href="#counter" id="ref-for-counter③">counter</a> values on a given element is a multi-step process: <ol> <li data-md> Existing counters are <a data-link-type="dfn" href="#inherit-counters" id="ref-for-inherit-counters">inherited</a> from previous elements. <li data-md> New counters are <a data-link-type="dfn" href="#instantiate-counter" id="ref-for-instantiate-counter">instantiated</a> (<a class="property" data-link-type="propdesc" href="#propdef-counter-reset" id="ref-for-propdef-counter-reset①">counter-reset</a>). <li data-md> Counter values are incremented (<a class="property" data-link-type="propdesc" href="#propdef-counter-increment" id="ref-for-propdef-counter-increment①">counter-increment</a>). <li data-md> Counter values are explicitly set (<a class="property" data-link-type="propdesc" href="#propdef-counter-set" id="ref-for-propdef-counter-set①">counter-set</a>). <li data-md> Counter values are used (<a class="css" data-link-type="maybe" href="#funcdef-counter" id="ref-for-funcdef-counter①">counter()</a>/<a class="css" data-link-type="maybe" href="#funcdef-counters" id="ref-for-funcdef-counters①">counters()</a>). </ol> UAs may have implementation-specific limits on the maximum or minimum value of a counter. If a counter reset, set, or increment would push the value outside of that range, the value must be clamped to that range. <h3 class="heading settled" data-level="4.1" id="counter-reset">4.1. Creating Counters: the <a class="property" data-link-type="propdesc" href="#propdef-counter-reset" id="ref-for-propdef-counter-reset②">counter-reset</a> property<a class="self-link" href="#counter-reset"></a></h3> <table class="def propdef" data-link-for-hint="counter-reset"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-counter-reset">counter-reset</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">[ <a class="production css" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name③"><counter-name></a> <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-3/#integer-value" id="ref-for-integer-value"><integer></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> ]<a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-one-plus" id="ref-for-mult-one-plus">+</a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑤">|</a> none <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>none <tr> <th>Applies to: <td><a href="https://www.w3.org/TR/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>the keyword <a class="css" data-link-type="maybe" href="#valdef-counter-reset-none" id="ref-for-valdef-counter-reset-none①">none</a> or a list, each item an identifier paired with an integer <tr> <th>Canonical order: <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>by computed value type </table> User Agents are expected to support this property on all media, including non-visual ones. The <a class="property" data-link-type="propdesc" href="#propdef-counter-reset" id="ref-for-propdef-counter-reset③">counter-reset</a> property <a data-link-type="dfn" href="#instantiate-counter" id="ref-for-instantiate-counter①">instantiates</a> new <a data-link-type="dfn" href="#counter" id="ref-for-counter④">counters</a> on an element and sets them to the specified integer values. Its values are defined as follows: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="counter-reset" data-dfn-type="value" data-export id="valdef-counter-reset-none">none</dfn> <dd> This element does not create any new counters. <dt><dfn class="css" data-dfn-for="counter-reset" data-dfn-type="value" data-export id="valdef-counter-reset-counter-name-integer"><a class="production css" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name④"><counter-name></a> <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-3/#integer-value" id="ref-for-integer-value①"><integer></a>?<a class="self-link" href="#valdef-counter-reset-counter-name-integer"></a></dfn> <dd> <a data-link-type="dfn" href="#instantiate-counter" id="ref-for-instantiate-counter②">Instantiates</a> a counter of the given <a class="production css" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name⑤"><counter-name></a> with a starting value of the given <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-3/#integer-value" id="ref-for-integer-value②"><integer></a>, defaulting to 0. </dl> <div class="example" id="example-2636b37c"> <a class="self-link" href="#example-2636b37c"></a> Note that counter properties follow the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-4/#cascade" id="ref-for-cascade①">cascading</a> rules as normal. Thus, due to cascading, the following style sheet: <pre class="highlight">h1 <c- p>{</c-> <c- k>counter-reset</c-><c- p>:</c-> section <c- m>-1</c-> <c- p>}</c-> h1 <c- p>{</c-> <c- k>counter-reset</c-><c- p>:</c-> imagenum <c- m>99</c-> <c- p>}</c-> </pre> will only reset imagenum. To reset both counters, they have to be specified together: <pre class="highlight">H1 <c- p>{</c-> <c- k>counter-reset</c-><c- p>:</c-> section <c- m>-1</c-> imagenum <c- m>99</c-> <c- p>}</c-></pre> The same principles apply to the <a class="property" data-link-type="propdesc" href="#propdef-counter-set" id="ref-for-propdef-counter-set②">counter-set</a> and <a class="property" data-link-type="propdesc" href="#propdef-counter-increment" id="ref-for-propdef-counter-increment②">counter-increment</a> properties. See <a data-link-type="biblio" href="#biblio-css-cascade-4">[css-cascade-4]</a>. </div> If multiple instances of the same <a class="production css" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name⑥"><counter-name></a> occur in the property value, only the last one is honored. <h3 class="heading settled" data-level="4.2" id="increment-set">4.2. Manipulating Counter Values: the <a class="property" data-link-type="propdesc" href="#propdef-counter-increment" id="ref-for-propdef-counter-increment③">counter-increment</a> and <a class="property" data-link-type="propdesc" href="#propdef-counter-set" id="ref-for-propdef-counter-set③">counter-set</a> properties<a class="self-link" href="#increment-set"></a></h3> <table class="def propdef" data-link-for-hint="counter-increment"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-counter-increment">counter-increment</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">[ <a class="production css" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name⑦"><counter-name></a> <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-3/#integer-value" id="ref-for-integer-value③"><integer></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt①">?</a> ]<a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-one-plus" id="ref-for-mult-one-plus①">+</a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑥">|</a> none <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>none <tr> <th>Applies to: <td><a href="https://www.w3.org/TR/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>the keyword <a class="css" data-link-type="maybe" href="#valdef-counter-reset-none" id="ref-for-valdef-counter-reset-none②">none</a> or a list, each item an identifier paired with an integer <tr> <th>Canonical order: <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>by computed value type </table> User Agents are expected to support this property on all media, including non-visual ones. <table class="def propdef" data-link-for-hint="counter-set"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-counter-set">counter-set</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">[ <a class="production css" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name⑧"><counter-name></a> <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-3/#integer-value" id="ref-for-integer-value④"><integer></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt②">?</a> ]<a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-one-plus" id="ref-for-mult-one-plus②">+</a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑦">|</a> none <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>none <tr> <th>Applies to: <td><a href="https://www.w3.org/TR/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>the keyword <a class="css" data-link-type="maybe" href="#valdef-counter-reset-none" id="ref-for-valdef-counter-reset-none③">none</a> or a list, each item an identifier paired with an integer <tr> <th>Canonical order: <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>by computed value type </table> User Agents are expected to support this property on all media, including non-visual ones. The <a class="property" data-link-type="propdesc" href="#propdef-counter-increment" id="ref-for-propdef-counter-increment④">counter-increment</a> and <a class="property" data-link-type="propdesc" href="#propdef-counter-set" id="ref-for-propdef-counter-set④">counter-set</a> properties manipulate the value of existing <a data-link-type="dfn" href="#counter" id="ref-for-counter⑤">counters</a>. They only <a data-link-type="dfn" href="#instantiate-counter" id="ref-for-instantiate-counter③">instantiate</a> new counters if there is no counter of the given name on the element yet. Their values are defined as follows: <dl> <dt><dfn class="css" data-dfn-for="counter-set counter-increment" data-dfn-type="value" data-export id="valdef-counter-set-counter-increment-none">none<a class="self-link" href="#valdef-counter-set-counter-increment-none"></a></dfn> <dd> This element does not alter the value of any counters. <dt><dfn class="css" data-dfn-for="counter-set counter-increment" data-dfn-type="value" data-export id="valdef-counter-set-counter-increment-counter-name-integer"><a class="production css" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name⑨"><counter-name></a> <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-3/#integer-value" id="ref-for-integer-value⑤"><integer></a>?<a class="self-link" href="#valdef-counter-set-counter-increment-counter-name-integer"></a></dfn> <dd> Sets (for <a class="property" data-link-type="propdesc" href="#propdef-counter-set" id="ref-for-propdef-counter-set⑤">counter-set</a>) or increments (for <a class="property" data-link-type="propdesc" href="#propdef-counter-increment" id="ref-for-propdef-counter-increment⑤">counter-increment</a>) the value of the named counter on the element to/by the specified <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-3/#integer-value" id="ref-for-integer-value⑥"><integer></a>. If the <integer> is omitted, it defaults to 1 (for counter-increment) or 0 (for counter-set). If there is not currently a counter of the given name on the element, the element <a data-link-type="dfn" href="#instantiate-counter" id="ref-for-instantiate-counter④">instantiates</a> a new counter of the given name with a starting value of 0 before setting or incrementing its value. </dl> <div class="example" id="example-838dca3e"> <a class="self-link" href="#example-838dca3e"></a> This example shows a way to number chapters and sections with "Chapter 1", "1.1", "1.2", etc. <pre class="highlight"><c- k>h1</c-><c- p>:</c->:before <c- p>{</c-> <c- k>content</c-><c- p>:</c-> <c- s>"Chapter "</c-> <c- nf>counter</c-><c- p>(</c->chapter<c- p>)</c-> <c- s>". "</c-><c- p>;</c-> <c- k>counter-increment</c-><c- p>:</c-> chapter<c- p>;</c-> <c- c>/* Add 1 to chapter */</c-> counter-reset: section<c- p>;</c-> <c- c>/* Set section to 0 */</c-> <c- p>}</c-> h2::before <c- p>{</c-> <c- k>content</c-><c- p>:</c-> <c- nf>counter</c-><c- p>(</c->chapter<c- p>)</c-> <c- s>"."</c-> <c- nf>counter</c-><c- p>(</c->section<c- p>)</c-> <c- s>" "</c-><c- p>;</c-> <c- k>counter-increment</c-><c- p>:</c-> section<c- p>;</c-> <c- p>}</c-> </pre> </div> If multiple instances of the same <a class="production css" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name①⓪"><counter-name></a> occur in the property value, they are all processed, in order. Thus increments will compound, but only the last set value will take effect. <h3 class="heading settled" data-level="4.3" id="nested-counters">4.3. Nested Counters and Scope<a class="self-link" href="#nested-counters"></a></h3> Counters are “self-nesting”; <a data-link-type="dfn" href="#instantiate-counter" id="ref-for-instantiate-counter⑤">instantiating</a> a new counter on an element which inherited an identically-named <a data-link-type="dfn" href="#counter" id="ref-for-counter⑥">counter</a> from its parent creates a new counter of the same name, nested inside the existing counter. This is important for situations like lists in HTML, where lists can be nested inside lists to arbitrary depth: it would be impossible to define uniquely named counters for each level. The <a class="css" data-link-type="maybe" href="#funcdef-counter" id="ref-for-funcdef-counter②">counter()</a> function only retrieves the <a data-link-type="dfn" href="#innermost" id="ref-for-innermost">innermost</a> counter of a given name on the element, whereas the <a class="css" data-link-type="maybe" href="#funcdef-counters" id="ref-for-funcdef-counters②">counters()</a> function uses all counters of a given name that contain the element. The <dfn class="dfn-paneled" data-dfn-type="dfn" data-local-lt="scope" data-lt="counter scope" data-noexport id="counter-scope">scope</dfn> of a <a data-link-type="dfn" href="#counter" id="ref-for-counter⑦">counter</a> therefore starts at the first element in the document that <a data-link-type="dfn" href="#instantiate-counter" id="ref-for-instantiate-counter⑥">instantiates</a> that counter and includes the element’s descendants and its following siblings with their descendants. However, it does not include any elements in the scope of a counter with the same name created by a <a class="property" data-link-type="propdesc" href="#propdef-counter-reset" id="ref-for-propdef-counter-reset④">counter-reset</a> on a later sibling of the element, allowing such explicit counter instantiations to obscure those earlier siblings. See <a href="#creating-counters">§ 4.4 Creating and Inheriting Counters</a> for the exact rules governing the scope of counters and their values. <div class="example" id="counter-nesting-example"> <a class="self-link" href="#counter-nesting-example"></a> The following code numbers nested list items. The result is very similar to that of setting display:list-item and <a class="css" data-link-type="propdesc" href="#propdef-list-style" id="ref-for-propdef-list-style④">list-style: inside</a> on the LI element: <pre class="highlight">ol <c- p>{</c-> <c- k>counter-reset</c-><c- p>:</c-> item <c- p>}</c-> li <c- p>{</c-> <c- k>display</c-><c- p>:</c-> block <c- p>}</c-> li::before <c- p>{</c-> <c- k>content</c-><c- p>:</c-> <c- nf>counter</c-><c- p>(</c->item<c- p>)</c-> <c- s>". "</c-><c- p>;</c-> <c- k>counter-increment</c-><c- p>:</c-> item <c- p>}</c-> </pre> In this example, an <a data-link-type="element" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-ol-element" id="ref-for-the-ol-element①">ol</a> will create a counter, and all children of the ol will refer to that counter. If we denote the <var>n</var>th instance of the item counter by item<var>n</var>, then the following HTML fragment will use the indicated counters. <div class="ol"> <div class="ol"> <code><ol></code> item0 is created, set to 0 <div class="li"><code><li></code> item0 is incremented to 1</div> <div class="li"> <code><li></code> item0 is incremented to 2 <div class="ol"> <code><ol></code> item1 is created, set to 0, nested in item0 <div class="li"><code><li></code> item1 is incremented to 1</div> <div class="li"><code><li></code> item1 is incremented to 2</div> <div class="li"> <code><li></code> item1 is incremented to 3 <div class="ol"> <code><ol></code> item2 is created, set to 0, nested in item1 <div class="li"><code><li></code> item2 is incremented to 1</div> <code></ol></code> </div> </div> <div class="li"> <code><li></code> item1 is incremented to 4 <div class="ol"> <code><ol></code> item3 is created, set to 0, nested in item1 <div class="li"><code><li></code> item3 is incremented to 1</div> <code></ol></code> </div> </div> <div class="li"><code><li></code> item1 is incremented to 5</div> <code></ol></code> </div> </div> <div class="li"><code><li></code> item0 is incremented to 3</div> <div class="li"><code><li></code> item0 is incremented to 4</div> <code></ol></code> </div> <div class="ol"> <code><ol></code> item4 is created, set to 0 <div class="li"><code><li></code> item4 is incremented to 1</div> <div class="li"><code><li></code> item4 is incremented to 2</div> <code></ol></code> </div> </div> </div> <h3 class="heading settled" data-level="4.4" id="creating-counters">4.4. Creating and Inheriting Counters<a class="self-link" href="#creating-counters"></a></h3> Each element or pseudo-element in a document has a (possibly empty) set of <a data-link-type="dfn" href="#counter" id="ref-for-counter⑧">counters</a> in the <a data-link-type="dfn" href="#counter-scope" id="ref-for-counter-scope">scope</a> of that element, either through inheritance from another element or through instantiation on the element directly. These counters are represented as a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="css-counters-set">CSS counters set</dfn>, which is a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ordered-set" id="ref-for-ordered-set">set</a> whose values are each a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#tuple" id="ref-for-tuple">tuple</a> of: a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#string" id="ref-for-string">string</a> (representing a counter’s <a data-link-type="dfn" href="#css-counter-name" id="ref-for-css-counter-name">name</a>), an element (representing the counter’s <a data-link-type="dfn" href="#css-counter-creator" id="ref-for-css-counter-creator">creator</a>), and an integer (representing the counter’s <a data-link-type="dfn" href="#css-counter-value" id="ref-for-css-counter-value">value</a>). The latest counter of a given name in that set represents the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="innermost">innermost</dfn> counter of that name. <h4 class="heading settled" data-level="4.4.1" id="inheriting-counters">4.4.1. Inheriting Counters<a class="self-link" href="#inheriting-counters"></a></h4> <div class="algorithm" data-algorithm="inherit counters"> An element <a data-link-type="dfn" href="#inherit-counters" id="ref-for-inherit-counters①">inherits</a> its initial set of counters from its parent and preceding sibling. It then takes the values for those counters from the values of the matching counters on its preceding element in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-order" id="ref-for-concept-tree-order">tree order</a> (which might be its parent, its preceding sibling, or a descendant of its previous sibling). To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="inherit-counters">inherit counters</dfn> into an <var>element</var>: <ol> <li data-md> If <var>element</var> is the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-root" id="ref-for-concept-tree-root">root</a> of its document tree, the element has an initially-empty <a data-link-type="dfn" href="#css-counters-set" id="ref-for-css-counters-set">CSS counters set</a>. Return. <li data-md> Let <var>element counters</var>, representing <var>element</var>’s own <a data-link-type="dfn" href="#css-counters-set" id="ref-for-css-counters-set①">CSS counters set</a>, be a copy of the CSS counters set of <var>element</var>’s parent element. <li data-md> Let <var>sibling counters</var> be the <a data-link-type="dfn" href="#css-counters-set" id="ref-for-css-counters-set③">CSS counters set</a> of <var>element</var>’s preceding sibling (if it has one), or an empty CSS counters set otherwise. <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-iterate" id="ref-for-map-iterate">For each</a> <var>counter</var> of <var>sibling counters</var>, if <var>element counters</var> does not already contain a counter with the same <a data-link-type="dfn" href="#css-counter-name" id="ref-for-css-counter-name①">name</a>, append a copy of <var>counter</var> to <var>element counters</var>. <li data-md> Let <var>value source</var> be the <a data-link-type="dfn" href="#css-counters-set" id="ref-for-css-counters-set⑤">CSS counters set</a> of the element immediately preceding <var>element</var> in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-order" id="ref-for-concept-tree-order①">tree order</a>. <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-iterate" id="ref-for-map-iterate①">For each</a> <var>source counter</var> of <var>value source</var>, if <var>element counters</var> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-contain" id="ref-for-list-contain">contains</a> a <a data-link-type="dfn" href="#counter" id="ref-for-counter①⓪">counter</a> with the same <a data-link-type="dfn" href="#css-counter-name" id="ref-for-css-counter-name②">name</a> and <a data-link-type="dfn" href="#css-counter-creator" id="ref-for-css-counter-creator①">creator</a>, then set the the <a data-link-type="dfn" href="#css-counter-value" id="ref-for-css-counter-value①">value</a> of that counter to <var>source counter</var>’s value. </ol> </div> <div class="example" id="counter-inheritance-example"> <a class="self-link" href="#counter-inheritance-example"></a> Take the following code as an example: <pre><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> </pre> Recall that <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-order" id="ref-for-concept-tree-order②">tree order</a> 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, it’s the order in which the parser encounters start tags as it reads the document. In here, the <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element" id="ref-for-the-ul-element②">ul</a></code> element establishes a new counter named example, and sets its value to 0. The #foo element, being the first child of the <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element" id="ref-for-the-ul-element③">ul</a></code>, inherits this counter. Its parent is also its immediately preceding element in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-order" id="ref-for-concept-tree-order③">tree order</a>, 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 <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-order" id="ref-for-concept-tree-order④">tree order</a>. This behavior allows a single counter to be used throughout a document, continuously incrementing, without the author having to worry about the nested structure of their document. </div> Note: Counter inheritance, like regular CSS <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-4/#inheritance" id="ref-for-inheritance">inheritance</a>, operates on the “flattened element tree” in the context of the <a data-link-type="biblio" href="#biblio-dom">[DOM]</a>. <h4 class="heading settled" data-level="4.4.2" id="instantiating-counters">4.4.2. Instantiating Counters<a class="self-link" href="#instantiating-counters"></a></h4> <div class="algorithm" data-algorithm="instantiate counter"> <a data-link-type="dfn" href="#counter" id="ref-for-counter①①">Counters</a> are <a data-link-type="dfn" href="#instantiate-counter" id="ref-for-instantiate-counter⑦">instantiated</a> when named in <a class="property" data-link-type="propdesc" href="#propdef-counter-reset" id="ref-for-propdef-counter-reset⑤">counter-reset</a>, and also when not otherwise present if named in <a class="property" data-link-type="propdesc" href="#propdef-counter-increment" id="ref-for-propdef-counter-increment⑦">counter-increment</a>, <a class="property" data-link-type="propdesc" href="#propdef-counter-set" id="ref-for-propdef-counter-set⑦">counter-set</a>, or the <a class="css" data-link-type="maybe" href="#funcdef-counter" id="ref-for-funcdef-counter③">counter()</a> or <a class="css" data-link-type="maybe" href="#funcdef-counters" id="ref-for-funcdef-counters③">counters()</a> notations. (Newly instantiated counters replace identically-named counters originating from previous siblings, but are added in addition to identically-named counters originating from ancestor elements, see <a href="#nested-counters">§ 4.3 Nested Counters and Scope</a>.) To <dfn class="dfn-paneled" data-dfn-type="dfn" data-local-lt="instantiate" data-lt="instantiate counter" data-noexport id="instantiate-counter">instantiate a counter</dfn> of a given <var>name</var> on an <var>element</var> with a starting <var>value</var>: <ol> <li data-md> Let <var>counters</var> be <var>element</var>’s <a data-link-type="dfn" href="#css-counters-set" id="ref-for-css-counters-set⑥">CSS counters set</a>. <li data-md> Let <var>innermost counter</var> be the last <a data-link-type="dfn" href="#counter" id="ref-for-counter①⑤">counter</a> in <var>counters</var> with the name <var>name</var>. If <var>innermost counter</var>’s originating element is <var>element</var> or a previous sibling of <var>element</var>, <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-remove" id="ref-for-list-remove">remove</a> <var>innermost counter</var> from <var>counters</var>. <li data-md> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#set-append" id="ref-for-set-append">Append</a> a new <a data-link-type="dfn" href="#counter" id="ref-for-counter①⑥">counter</a> to <var>counters</var> with name <var>name</var>, originating element <var>element</var>, and initial value <var>value</var> </ol> </div> <h3 class="heading settled" data-level="4.5" id="counters-without-boxes">4.5. Counters in elements that do not generate boxes<a class="self-link" href="#counters-without-boxes"></a></h3> An element that does not generate a box (for example, an element with <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-display-3/#propdef-display" id="ref-for-propdef-display①">display</a> set to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-display-3/#valdef-display-none" id="ref-for-valdef-display-none">none</a>, or a pseudo-element with <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-content-3/#propdef-content" id="ref-for-propdef-content⑥">content</a> set to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-content-3/#valdef-content-none" id="ref-for-valdef-content-none①">none</a>) cannot set, reset, or increment a counter. The counter properties are still valid on such an element, but they must have no effect. <div class="example" id="example-bdf0aac0"> <a class="self-link" href="#example-bdf0aac0"></a> For example, with the following style sheet, H2s with class "secret" do not increment count2. <pre class="highlight">h2 <c- p>{</c-> <c- k>counter-increment</c-><c- p>:</c-> count2<c- p>;</c-> <c- p>}</c-> h2.secret <c- p>{</c-> <c- k>display</c-><c- p>:</c-> none<c- p>;</c-> <c- p>}</c-> </pre> </div> Note: Other methods of “hiding” elements, such as setting <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS2/visufx.html#propdef-visibility" id="ref-for-propdef-visibility">visibility</a> to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css2/#valdef-visibility-hidden" id="ref-for-valdef-visibility-hidden">hidden</a>, still cause the element to generate a box, and so are not excepted here. Whether a <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#replaced-element" id="ref-for-replaced-element①">replaced element’s</a> descendants (such as HTML <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-option-element" id="ref-for-the-option-element">option</a></code>, or SVG <code><a data-link-type="element" href="https://www.w3.org/TR/SVG2/shapes.html#elementdef-rect" id="ref-for-elementdef-rect">rect</a></code>) can set, reset, or increment a counter is undefined. Note: The behavior on <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#replaced-element" id="ref-for-replaced-element②">replaced element</a> descendants is currently undefined due to a lack of interoperability across implementations. <h3 class="heading settled" data-level="4.6" id="list-item-counter">4.6. The Implicit <a class="css" data-link-type="maybe" href="#valdef-counter-increment-list-item" id="ref-for-valdef-counter-increment-list-item④">list-item</a> Counter<a class="self-link" href="#list-item-counter"></a></h3> In addition to any explicitly defined <a data-link-type="dfn" href="#counter" id="ref-for-counter①⑦">counters</a> that authors write in their styles, <a data-link-type="dfn" href="#list-item" id="ref-for-list-item②①">list items</a> automatically increment a special <dfn class="dfn-paneled css" data-dfn-for="counter-increment, counter-set, counter-reset, counter(), counters()" data-dfn-type="value" data-export id="valdef-counter-increment-list-item">list-item</dfn> counter, which is used when generating the default <a data-link-type="dfn" href="#marker-string" id="ref-for-marker-string⑥">marker string</a> on list items (see <a class="property" data-link-type="propdesc" href="#propdef-list-style-type" id="ref-for-propdef-list-style-type⑦">list-style-type</a>). Specifically, unless the <a class="property" data-link-type="propdesc" href="#propdef-counter-increment" id="ref-for-propdef-counter-increment⑧">counter-increment</a> property explicitly specifies a different increment for the <a class="css" data-link-type="maybe" href="#valdef-counter-increment-list-item" id="ref-for-valdef-counter-increment-list-item⑤">list-item</a> counter, it must be incremented by 1 on every <a data-link-type="dfn" href="#list-item" id="ref-for-list-item②③">list item</a>, at the same time that <a data-link-type="dfn" href="#counter" id="ref-for-counter①⑨">counters</a> are normally incremented (exactly as if the list item had list-item 1 appended to their counter-increment value, including side-effects such as possibly <a data-link-type="dfn" href="#instantiate-counter" id="ref-for-instantiate-counter⑨">instantiating</a> a new counter, etc). This does not affect the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-4/#specified-value" id="ref-for-specified-value">specified</a> or <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-4/#computed-value" id="ref-for-computed-value①">computed values</a> of counter-increment. <div class="example" id="example-60f85b38"> <a class="self-link" href="#example-60f85b38"></a> Because each <a data-link-type="dfn" href="#list-item" id="ref-for-list-item②⑤">list item</a> automatically increments the <a class="css" data-link-type="maybe" href="#valdef-counter-increment-list-item" id="ref-for-valdef-counter-increment-list-item⑥">list-item</a> counter by 1, consecutive list items with a numeric <a class="property" data-link-type="propdesc" href="#propdef-list-style-type" id="ref-for-propdef-list-style-type⑧">list-style-type</a> will be consecutively numbered by default—even if the author sets <a class="property" data-link-type="propdesc" href="#propdef-counter-increment" id="ref-for-propdef-counter-increment①①">counter-increment</a> to another value such as counter-increment: itemnumber or even <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css2/#valdef-counter-reset-none" id="ref-for-valdef-counter-reset-none④">none</a>. This protects the automatic list-item counter from inadvertently being overridden by declarations intended to address other counters. However, since the automatic <a class="css" data-link-type="maybe" href="#valdef-counter-increment-list-item" id="ref-for-valdef-counter-increment-list-item⑧">list-item</a> increment does not happen if the <a data-link-type="dfn" href="#list-item" id="ref-for-list-item②⑦">list item’s</a> <a class="property" data-link-type="propdesc" href="#propdef-counter-increment" id="ref-for-propdef-counter-increment①③">counter-increment</a> explicitly mentions the list-item counter, li { counter-increment: list-item 2; } will increment list-item by 2 as specified, not by 3 as would happen if list-item 1 were unconditionally appended. This also allows to turn off the automatic <a class="css" data-link-type="maybe" href="#valdef-counter-increment-list-item" id="ref-for-valdef-counter-increment-list-item①①">list-item</a> counter increment, by overriding it explicitly, e.g. <a class="css" data-link-type="propdesc" href="#propdef-counter-increment" id="ref-for-propdef-counter-increment①④">counter-increment: list-item 0;</a>. </div> In all other respects, the <a class="css" data-link-type="maybe" href="#valdef-counter-increment-list-item" id="ref-for-valdef-counter-increment-list-item①②">list-item</a> <a data-link-type="dfn" href="#counter" id="ref-for-counter②①">counter</a> behaves like any other counter and can be used and manipulated by authors to adjust <a data-link-type="dfn" href="#list-item" id="ref-for-list-item②⑧">list item</a> styling or for other purposes. <div class="example" id="example-0003035e"> <a class="self-link" href="#example-0003035e"></a> In the following example, the list is modified to count by twos: <pre>ol.evens > li { counter-increment: list-item 2; } </pre> A three-item list would be rendered as <pre>2. First Item 4. Second Item 6. Third Item </pre> </div> UAs and host languages should ensure that the <a class="css" data-link-type="maybe" href="#valdef-counter-increment-list-item" id="ref-for-valdef-counter-increment-list-item①③">list-item</a> counter values by default reflect the underlying numeric value dictated by host language semantics when setting up list item styling in their UA style sheet and presentational hint style mappings. See, e.g. <a href="#ua-stylesheet">Appendix A: Sample Style Sheet For HTML</a>. <div class="example" id="example-598c7e61"> <a class="self-link" href="#example-598c7e61"></a> In the following example, the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-content-3/#propdef-content" id="ref-for-propdef-content⑦">content</a> property is used to create tiered numbering that hooks into the <a class="css" data-link-type="maybe" href="#valdef-counter-increment-list-item" id="ref-for-valdef-counter-increment-list-item①④">list-item</a> counter, and thus respects any numbering changes inflicted through HTML: <pre>ol > li::marker { content: counters(list-item,'.') '.'; } </pre> Nested lists using this rule would be rendered like <pre>1. First top-level item 5. Second top-level item, value=5 5.3. First second-level item, list start=3 5.4. Second second-level item, list start=3 5.4.4. First third-level item in reversed list 5.4.3. Second third-level item in reversed list 5.4.2. Third third-level item in reversed list 5.4.1. Fourth third-level item in reversed list 5.5. Third second-level item, list start=3 6. Third top-level item </pre> given markup such as <pre><ol> <li>First top-level item <li value=5>Second top-level item, value=5 <ol start=3> <li>First second-level item, list start=3 <li>Second second-level item, list start=3 <ol reversed> <li>First third-level item in reversed list <li>Second third-level item in reversed list <li>Third third-level item in reversed list <li>Fourth third-level item in reversed list </ol> </ol> <li>Third second-level item, list start=3 <li>Third top-level item </ol> </pre> </div> <h3 class="heading settled" data-level="4.7" id="counter-functions">4.7. Outputting Counters: the <a class="css" data-link-type="maybe" href="#funcdef-counter" id="ref-for-funcdef-counter④">counter()</a> and <a class="css" data-link-type="maybe" href="#funcdef-counters" id="ref-for-funcdef-counters④">counters()</a> functions<a class="self-link" href="#counter-functions"></a></h3> <a data-link-type="dfn" href="#counter" id="ref-for-counter②③">Counters</a> have no visible effect by themselves, but their values can be used with the <a class="css" data-link-type="maybe" href="#funcdef-counter" id="ref-for-funcdef-counter⑤">counter()</a> and <a class="css" data-link-type="maybe" href="#funcdef-counters" id="ref-for-funcdef-counters⑤">counters()</a> functions, whose <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-4/#used-value" id="ref-for-used-value">used values</a> represent counter values as strings or images. They are defined as follows: <pre><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-counter"><a class="production" data-link-type="type" href="#typedef-counter" id="ref-for-typedef-counter"><counter></a></dfn> = <a class="production" data-link-type="function" href="#funcdef-counter" id="ref-for-funcdef-counter⑥"><counter()></a> | <a class="production" data-link-type="function" href="#funcdef-counters" id="ref-for-funcdef-counters⑥"><counters()></a> <dfn class="dfn-paneled" data-dfn-type="function" data-export id="funcdef-counter">counter()</dfn> = counter( <a class="production" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name①①"><counter-name></a>, <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style⑧" title="Expands to: cjk-ideographic | japanese-formal | japanese-informal | simp-chinese-formal | simp-chinese-informal | trad-chinese-formal | trad-chinese-informal"><counter-style></a>? ) <dfn class="dfn-paneled" data-dfn-type="function" data-export id="funcdef-counters">counters()</dfn> = counters( <a class="production" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name①②"><counter-name></a>, <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-3/#string-value" id="ref-for-string-value③"><string></a>, <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style⑨" title="Expands to: cjk-ideographic | japanese-formal | japanese-informal | simp-chinese-formal | simp-chinese-informal | trad-chinese-formal | trad-chinese-informal"><counter-style></a>? ) </pre> where <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style①⓪" title="Expands to: cjk-ideographic | japanese-formal | japanese-informal | simp-chinese-formal | simp-chinese-informal | trad-chinese-formal | trad-chinese-informal"><counter-style></a> specifies the <a data-link-type="dfn" href="https://www.w3.org/TR/css-counter-styles-3/#counter-style" id="ref-for-counter-style">counter style</a> for <a data-link-type="dfn" href="https://www.w3.org/TR/css-counter-styles-3/#generate-a-counter" id="ref-for-generate-a-counter①">generating a representation</a> of the named counter(s) as defined in <a data-link-type="biblio" href="#biblio-css-counter-styles-3">[css-counter-styles-3]</a> and <dl> <dt>counter() <dd> Represents the value of the <a data-link-type="dfn" href="#innermost" id="ref-for-innermost①">innermost</a> <a data-link-type="dfn" href="#counter" id="ref-for-counter②④">counter</a> in the element’s <a data-link-type="dfn" href="#css-counters-set" id="ref-for-css-counters-set⑦">CSS counters set</a> named <a class="production css" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name①③"><counter-name></a> using the <a data-link-type="dfn" href="https://www.w3.org/TR/css-counter-styles-3/#counter-style" id="ref-for-counter-style①">counter style</a> named <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style①①" title="Expands to: cjk-ideographic | japanese-formal | japanese-informal | simp-chinese-formal | simp-chinese-informal | trad-chinese-formal | trad-chinese-informal"><counter-style></a>. <dt>counters() <dd> Represents the values of all the <a data-link-type="dfn" href="#counter" id="ref-for-counter②⑤">counters</a> in the element’s <a data-link-type="dfn" href="#css-counters-set" id="ref-for-css-counters-set⑧">CSS counters set</a> named <a class="production css" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name①④"><counter-name></a> using the <a data-link-type="dfn" href="https://www.w3.org/TR/css-counter-styles-3/#counter-style" id="ref-for-counter-style②">counter style</a> named <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style①②" title="Expands to: cjk-ideographic | japanese-formal | japanese-informal | simp-chinese-formal | simp-chinese-informal | trad-chinese-formal | trad-chinese-informal"><counter-style></a>, sorted in outermost-first to <a data-link-type="dfn" href="#innermost" id="ref-for-innermost②">innermost</a>-last order and joined by the specified <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-3/#string-value" id="ref-for-string-value④"><string></a>. </dl> In both cases, if the <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style①③" title="Expands to: cjk-ideographic | japanese-formal | japanese-informal | simp-chinese-formal | simp-chinese-informal | trad-chinese-formal | trad-chinese-informal"><counter-style></a> argument is omitted it defaults to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-counter-styles-3/#decimal" id="ref-for-decimal①">decimal</a>. If no <a data-link-type="dfn" href="#counter" id="ref-for-counter②⑥">counter</a> named <a class="production css" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name①⑤"><counter-name></a> exists on an element where <a class="css" data-link-type="maybe" href="#funcdef-counter" id="ref-for-funcdef-counter⑦">counter()</a> or <a class="css" data-link-type="maybe" href="#funcdef-counters" id="ref-for-funcdef-counters⑦">counters()</a> is used, one is first <a data-link-type="dfn" href="#instantiate-counter" id="ref-for-instantiate-counter①⓪">instantiated</a> with a starting value of 0. <div class="example" id="example-a273a37d"> <a class="self-link" href="#example-a273a37d"></a> <pre>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 */ </pre> </div> <div class="example" id="example-e8a9db02"> <a class="self-link" href="#example-e8a9db02"></a> The following example shows a simple use of the <a class="css" data-link-type="maybe" href="#funcdef-counters" id="ref-for-funcdef-counters⑧">counters()</a> function: <pre class="highlight"><c- p><</c-><c- f>ul</c-><c- p>></c-> <c- p><</c-><c- f>li</c-><c- p>></c->one<c- p></</c-><c- f>li</c-><c- p>></c-> <c- p><</c-><c- f>li</c-><c- p>></c->two <c- p><</c-><c- f>ul</c-><c- p>></c-> <c- p><</c-><c- f>li</c-><c- p>></c->nested one<c- p></</c-><c- f>li</c-><c- p>></c-> <c- p><</c-><c- f>li</c-><c- p>></c->nested two<c- p></</c-><c- f>li</c-><c- p>></c-> <c- p></</c-><c- f>ul</c-><c- p>></c-> <c- p></</c-><c- f>li</c-><c- p>></c-> <c- p><</c-><c- f>li</c-><c- p>></c->three<c- p></</c-><c- f>li</c-><c- p>></c-> <c- p></</c-><c- f>ul</c-><c- p>></c-> <c- p><</c-><c- f>style</c-><c- p>></c-> <c- f>li</c-><c- p>::</c-><c- nd>marker</c-> <c- p>{</c-> <c- k>content</c-><c- p>:</c-> <c- t>'('</c-> <c- nf>counters</c-><c- p>(</c-><c- kc>list-item</c-><c- p>,</c-><c- t>'.'</c-><c- p>)</c-> <c- t>') '</c-><c- p>;</c-> <c- p>}</c-> <c- p></</c-><c- f>style</c-><c- p>></c-> </pre> The preceding document should render something like this: <pre>(1) one (2) two (2.1) nested one (2.2) nested two (3) three </pre> </div> <div class="example" id="example-b1a4542d"> <a class="self-link" href="#example-b1a4542d"></a> Because counters inherit to siblings as well, they can be used to number headings and subheadings, which aren’t nested within each other. Unfortunately, this prevents the use of <a class="css" data-link-type="maybe" href="#funcdef-counters" id="ref-for-funcdef-counters⑨">counters()</a> as counters from siblings don’t nest, but one can create multiple counters and manually concatenate them instead: <pre class="highlight"><c- p><</c-><c- f>h1</c-><c- p>></c->First H1<c- p></</c-><c- f>h1</c-><c- p>></c-> ... <c- p><</c-><c- f>h2</c-><c- p>></c->First H2 in H1<c- p></</c-><c- f>h2</c-><c- p>></c-> ... <c- p><</c-><c- f>h2</c-><c- p>></c->Second H2 in H1<c- p></</c-><c- f>h2</c-><c- p>></c-> ... <c- p><</c-><c- f>h3</c-><c- p>></c->First H3 in H2<c- p></</c-><c- f>h3</c-><c- p>></c-> ... <c- p><</c-><c- f>h1</c-><c- p>></c->Second H1<c- p></</c-><c- f>h1</c-><c- p>></c-> ... <c- p><</c-><c- f>h2</c-><c- p>></c->First H2 in H1<c- p></</c-><c- f>h2</c-><c- p>></c-> ... <c- p><</c-><c- f>style</c-><c- p>></c-> <c- f>body</c-> <c- p>{</c-> <c- k>counter-reset</c-><c- p>:</c-> <c- n>h1</c-> <c- n>h2</c-> <c- n>h3</c-><c- p>;</c-> <c- p>}</c-> <c- f>h1</c-> <c- p>{</c-> <c- k>counter-increment</c-><c- p>:</c-> <c- n>h1</c-><c- p>;</c-> <c- k>counter-reset</c-><c- p>:</c-> <c- n>h2</c-> <c- n>h3</c-><c- p>;}</c-> <c- f>h2</c-> <c- p>{</c-> <c- k>counter-increment</c-><c- p>:</c-> <c- n>h2</c-><c- p>;</c-> <c- k>counter-reset</c-><c- p>:</c-> <c- n>h3</c-><c- p>;</c-> <c- p>}</c-> <c- f>h3</c-> <c- p>{</c-> <c- k>counter-increment</c-><c- p>:</c-> <c- n>h3</c-><c- p>;</c-> <c- p>}</c-> <c- f>h1</c-><c- p>::</c-><c- nd>before</c-> <c- p>{</c-> <c- k>content</c-><c- p>:</c-> counter<c- p>(</c-><c- n>h1</c-><c- p>,</c-><c- kc>upper-alpha</c-><c- p>)</c-> <c- t>' '</c-><c- p>;</c-> <c- p>}</c-> <c- f>h2</c-><c- p>::</c-><c- nd>before</c-> <c- p>{</c-> <c- k>content</c-><c- p>:</c-> counter<c- p>(</c-><c- n>h1</c-><c- p>,</c-><c- kc>upper-alpha</c-><c- p>)</c-> <c- t>'.'</c-> counter<c- p>(</c-><c- n>h2</c-><c- p>,</c-><c- kc>decimal</c-><c- p>)</c-> <c- t>' '</c-><c- p>;</c-> <c- p>}</c-> <c- f>h3</c-><c- p>::</c-><c- nd>before</c-> <c- p>{</c-> <c- k>content</c-><c- p>:</c-> counter<c- p>(</c-><c- n>h1</c-><c- p>,</c-><c- kc>upper-alpha</c-><c- p>)</c-> <c- t>'.'</c-> counter<c- p>(</c-><c- n>h2</c-><c- p>,</c-><c- kc>decimal</c-><c- p>)</c-> <c- t>'.'</c-> counter<c- p>(</c-><c- n>h3</c-><c- p>,</c-><c- kc>lower-roman</c-><c- p>)</c-> <c- t>' '</c-><c- p>;</c-> <c- p>}</c-> <c- p></</c-><c- f>style</c-><c- p>></c-> </pre> The preceding document should render something like this: <pre>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 ... </pre> </div> <div class="issue" id="issue-4b0c2d48"> <a class="self-link" href="#issue-4b0c2d48"></a> Counters are sometimes useful for things other than printing markers. In general, they provide the ability to number elements in sequence, which can be useful for other properties to reference. For example, using <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-flexbox-1/#propdef-order" id="ref-for-propdef-order">order</a> to put an element between two other specific elements currently requires you to explicitly put order on every element before and/or after the desired insertion point. If you can set the order value of everything to a counter, tho, you can more easily insert an element into an arbitrary spot between two others. Other use-cases involve nested or sibling elements with transforms that are meant to be slightly different from each other. Today you have to use a preprocessor to do this in a reasonable way, but a counter would make it work well in "plain" CSS. (You can built up successive values in the nested case today by using <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#custom-property" id="ref-for-custom-property">custom properties</a> and stacking up nested <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-values-4/#funcdef-calc" id="ref-for-funcdef-calc">calc()</a>s, but this is a *little bit* clumsy, and doesn’t work for siblings.) Suggestion is to add a counter-value(<a class="production css" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name①⑥"><counter-name></a>) function, which returns the value of the named counter as an integer, rather than returning a string. See <a href="https://github.com/w3c/csswg-drafts/issues/1026">Issue 1026</a>. </div> <h2 class="heading settled" id="ua-stylesheet"> Appendix A: Sample Style Sheet For HTML<a class="self-link" href="#ua-stylesheet"></a></h2> This section is informative, not normative. The <a data-link-type="biblio" href="#biblio-html">[HTML]</a> <a href="https://html.spec.whatwg.org/multipage/rendering.html#lists">Rendering</a> chapter defines the normative default properties that apply to HTML lists; this sample style sheet is provided to illustrate the CSS features using familiar markup conventions. <a class="self-link" href="#issue-33887700"></a> Discussion of how to support <code>ol[reversed]</code> list numbering in CSS is ongoing. See, e.g. <a href="https://github.com/w3c/csswg-drafts/issues/4181">Issue 4181</a>. <pre>/* Set up list items */ li { display: list-item; /* implies 'counter-increment: list-item' */ } /* Set up ol and ul so that they scope the list-item counter */ ol, ul { counter-reset: list-item; } /* Default list style types for lists */ ol { list-style-type: decimal; } ul { list-style-type: toggle(disc, circle, square); } /* 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); } /* Box Model Rules */ ol, ul { display: block; margin-block: 1em; marker-side: match-parent; padding-inline-start: 40px; } ol ol, ol ul, ul ul, ul ol { margin-block: 0; } li { text-align: match-parent; } </pre> <h2 class="no-num heading settled" id="acknowledgments"> Acknowledgments<a class="self-link" href="#acknowledgments"></a></h2> This specification is made possible by input from Aharon Lanin, Arron Eicholz, Brad Kemper, David Baron, Emilio Cobos Álvarez, Mats Palmgren, Oriol Brufau, Simon Sapin, Xidorn Quan <h2 class="no-num heading settled" id="changes">Changes<a class="self-link" href="#changes"></a></h2> This section documents the changes since previous publications. <h3 class="heading settled" id="changes-20200709">Changes since the 9 July 2020 WD<a class="self-link" href="#changes-20200709"></a></h3> <ul> <li>Clarified properties that apply to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker②①">::marker</a> boxes vs. to the contents of ::marker boxes. (<a href="https://github.com/w3c/csswg-drafts/issues/4568">Issue 4568</a>) <li>Added <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#propdef-text-transform" id="ref-for-propdef-text-transform①">text-transform: none</a> to the UA default style sheet for <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker②③">::marker</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/4206">Issue 4206</a>) <li>Changed counter inheritance to take from the parent first, and only take from the sibling if it’s a new counter. (<a href="https://github.com/w3c/csswg-drafts/issues/5477">Issue 5477</a>) </ul> <h3 class="heading settled" id="changes-20190817">Changes since the 17 August 2019 WD<a class="self-link" href="#changes-20190817"></a></h3> <ul> <li>Specified that <a class="css" data-link-type="maybe" href="#list-style-position-outside" id="ref-for-list-style-position-outside②">outside</a> list markers <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#block-container" id="ref-for-block-container②">block containers</a>. (Their <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#outer-display-type" id="ref-for-outer-display-type">outer display type</a> remains undefined.) <li>Stole list of properties applying to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker②④">::marker</a> from <a data-link-type="biblio" href="#biblio-css-pseudo-4">[CSS-PSEUDO-4]</a> and added animations, transitions, and <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#propdef-white-space" id="ref-for-propdef-white-space②">white-space</a>. <li>Added <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#propdef-white-space" id="ref-for-propdef-white-space③">white-space: pre</a> to UA default style sheet for <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker②⑤">::marker</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/4448">Issue 4448</a>) Note, however, that the exact white space processing behavior of marker boxes is still being worked out. </ul> <h3 class="heading settled" id="changes-20190425">Changes since the 25 April 2019 WD<a class="self-link" href="#changes-20190425"></a></h3> <ul> <li>Rewrote the <a href="#auto-numbering">§ 4 Automatic Numbering With Counters</a> section for better precision, editorial clarity, and synchronization with CSS2. </ul> <h3 class="heading settled" id="changes-20140320">Changes since the 20 March 2014 WD<a class="self-link" href="#changes-20140320"></a></h3> <ul> <li>Use <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#identifier-value" id="ref-for-identifier-value②"><custom-ident></a> consistently for counter names. <li>Dropped <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/css-position-3/#propdef-position" id="ref-for-propdef-position">position: marker</a> (marker positioning is now mostly undefined, as in CSS2). <li>Completely rewrote chapter on markers to tighten it up, align with current expectations, and make editorial improvements. <li>Pulled the <a class="css" data-link-type="maybe" href="#valdef-counter-increment-list-item" id="ref-for-valdef-counter-increment-list-item①⑤">list-item</a> counter definition into its own section, added examples, and made some clarifications. <li>Renamed values of <a class="property" data-link-type="propdesc" href="#propdef-marker-side" id="ref-for-propdef-marker-side④">marker-side</a> to match conventions from box/text alignment. <li>Defined that <a class="property" data-link-type="propdesc" href="#propdef-counter-set" id="ref-for-propdef-counter-set⑧">counter-set</a> is applied after <a class="property" data-link-type="propdesc" href="#propdef-counter-increment" id="ref-for-propdef-counter-increment①⑤">counter-increment</a> rather than before. (<a href="https://github.com/w3c/csswg-drafts/issues/3810">Issue 3810</a>) <li>Established the canonical order of <a class="property" data-link-type="propdesc" href="#propdef-list-style" id="ref-for-propdef-list-style⑤">list-style</a> serialization to put <a class="production" data-link-type="propdesc" href="#propdef-list-style-type" id="ref-for-propdef-list-style-type⑨"><'list-style-type'></a> last. (<a href="https://github.com/w3c/csswg-drafts/issues/2624">Issue 2624</a>) </ul> <h3 class="heading settled" id="changes-from-css2">Changes From CSS Level 2<a class="self-link" href="#changes-from-css2"></a></h3> As described in the introduction section, there are significant changes in this module when compared to CSS2.1. <ol> <li>The <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker②⑥">::marker</a> pseudo-element has been introduced to allow styling of the list marker directly. <li><a class="property" data-link-type="propdesc" href="#propdef-list-style-type" id="ref-for-propdef-list-style-type①⓪">list-style-type</a> now accepts a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-3/#string-value" id="ref-for-string-value⑤"><string></a> as well as the extended <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style①④" title="Expands to: cjk-ideographic | japanese-formal | japanese-informal | simp-chinese-formal | simp-chinese-informal | trad-chinese-formal | trad-chinese-informal"><counter-style></a> values from <a data-link-type="biblio" href="#biblio-css-counter-styles-3">[css-counter-styles-3]</a>.. <li>The <a class="css" data-link-type="maybe" href="#valdef-counter-increment-list-item" id="ref-for-valdef-counter-increment-list-item①⑥">list-item</a> predefined counter identifier has been introduced. <li>The <a class="property" data-link-type="propdesc" href="#propdef-counter-set" id="ref-for-propdef-counter-set⑨">counter-set</a> property has been added. <li>Allowed for <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-level" id="ref-for-inline-level">inline-level</a> <a data-link-type="dfn" href="#list-item" id="ref-for-list-item②⑨">list items</a>, as introduced in <a data-link-type="biblio" href="#biblio-css-display-3">[CSS-DISPLAY-3]</a>. </ol> </main> <h2 class="no-ref no-num heading settled" id="conformance"> Conformance<a class="self-link" href="#conformance"></a></h2> <h3 class="no-ref heading settled" id="conventions"> Document conventions<a class="self-link" href="#conventions"></a></h3> Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification. All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> Examples in this specification are introduced with the words “for example” or are set apart from the normative text with <code>class="example"</code>, like this: <div class="example" id="example-ae2b6bc0"> <a class="self-link" href="#example-ae2b6bc0"></a> This is an example of an informative example. </div> Informative notes begin with the word “Note” and are set apart from the normative text with <code>class="note"</code>, like this: Note, this is an informative note. Advisements are normative sections styled to evoke special attention and are set apart from other normative text with <code></code>, like this: UAs MUST provide an accessible alternative. <h3 class="no-ref heading settled" id="conformance-classes"> Conformance classes<a class="self-link" href="#conformance-classes"></a></h3> Conformance to this specification is defined for three conformance classes: <dl> <dt>style sheet <dd>A <a href="https://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS style sheet</a>. <dt>renderer <dd>A <a href="https://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders documents that use them. <dt>authoring tool <dd>A <a href="https://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that writes a style sheet. </dl> A style sheet is conformant to this specification if all of its statements that use syntax defined in this module are valid according to the generic CSS grammar and the individual grammars of each feature defined in this module. A renderer is conformant to this specification if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the features defined by this specification by parsing them correctly and rendering the document accordingly. However, the inability of a UA to correctly render a document due to limitations of the device does not make the UA non-conformant. (For example, a UA is not required to render color on a monochrome monitor.) An authoring tool is conformant to this specification if it writes style sheets that are syntactically correct according to the generic CSS grammar and the individual grammars of each feature in this module, and meet all other conformance requirements of style sheets as described in this module. <h3 class="no-ref heading settled" id="partial"> Partial implementations<a class="self-link" href="#partial"></a></h3> So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and <a href="https://www.w3.org/TR/CSS21/conform.html#ignore">ignore as appropriate</a>) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support. In particular, user agents must not selectively ignore unsupported component values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored. <h4 class="heading settled" id="conform-future-proofing"> Implementations of Unstable and Proprietary Features<a class="self-link" href="#conform-future-proofing"></a></h4> To avoid clashes with future stable CSS features, the CSSWG recommends <a href="https://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="https://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="https://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. <h3 class="no-ref heading settled" id="testing"> Non-experimental implementations<a class="self-link" href="#testing"></a></h3> Once a specification reaches the Candidate Recommendation stage, non-experimental implementations are possible, and implementors should release an unprefixed implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec. To establish and maintain the interoperability of CSS across implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the testcases used for that implementation report) to the W3C before releasing an unprefixed implementation of any CSS features. Testcases submitted to W3C are subject to review and correction by the CSS Working Group. Further information on submitting testcases and implementation reports can be found from on the CSS Working Group’s website at <a href="https://www.w3.org/Style/CSS/Test/">https://www.w3.org/Style/CSS/Test/</a>. Questions should be directed to the <a href="https://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. <script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script> <h2 class="no-num no-ref heading settled" id="index">Index<a class="self-link" href="#index"></a></h2> <h3 class="no-num no-ref heading settled" id="index-defined-here">Terms defined by this specification<a class="self-link" href="#index-defined-here"></a></h3> <ul class="index"> <li><a href="#typedef-counter"><counter></a>, in §4.7 <li><a href="#counter">counter</a>, in §4 <li><a href="#funcdef-counter">counter()</a>, in §4.7 <li><a href="#propdef-counter-increment">counter-increment</a>, in §4.2 <li><a href="#typedef-counter-name"><counter-name></a>, in §4 <li> <counter-name> <integer>? <ul> <li><a href="#valdef-counter-reset-counter-name-integer">value for counter-reset</a>, in §4.1 <li><a href="#valdef-counter-set-counter-increment-counter-name-integer">value for counter-set counter-increment</a>, in §4.2 </ul> <li><a href="#counter-properties">counter properties</a>, in §4 <li><a href="#propdef-counter-reset">counter-reset</a>, in §4.1 <li><a href="#funcdef-counters">counters()</a>, in §4.7 <li><a href="#counter-scope">counter scope</a>, in §4.3 <li><a href="#propdef-counter-set">counter-set</a>, in §4.2 <li><a href="#valdef-list-style-type-counter-style"><counter-style></a>, in §3.4 <li><a href="#css-counter-creator">creator</a>, in §4 <li><a href="#css-counters-set">CSS counters set</a>, in §4.4 <li><a href="#valdef-list-style-image-image"><image></a>, in §3.3 <li><a href="#inherit-counters">inherit counters</a>, in §4.4.1 <li><a href="#innermost">innermost</a>, in §4.4 <li><a href="#valdef-list-style-position-inside">inside</a>, in §3.5 <li><a href="#instantiate-counter">instantiate</a>, in §4.4.2 <li><a href="#instantiate-counter">instantiate counter</a>, in §4.4.2 <li><a href="#list-item">list item</a>, in §2 <li><a href="#valdef-counter-increment-list-item">list-item</a>, in §4.6 <li><a href="#propdef-list-style">list-style</a>, in §3.6 <li><a href="#propdef-list-style-image">list-style-image</a>, in §3.3 <li><a href="#propdef-list-style-position">list-style-position</a>, in §3.5 <li><a href="#propdef-list-style-type">list-style-type</a>, in §3.4 <li><a href="#marker">marker</a>, in §3 <li><a href="#marker">marker box</a>, in §3 <li><a href="#marker-image">marker image</a>, in §3.3 <li><a href="#propdef-marker-side">marker-side</a>, in §3.7 <li><a href="#marker-string">marker string</a>, in §3.4 <li><a href="#valdef-marker-side-match-parent">match-parent</a>, in §3.7 <li><a href="#valdef-marker-side-match-self">match-self</a>, in §3.7 <li><a href="#css-counter-name">name</a>, in §4 <li> none <ul> <li><a href="#valdef-counter-reset-none">value for counter-reset</a>, in §4.1 <li><a href="#valdef-counter-set-counter-increment-none">value for counter-set counter-increment</a>, in §4.2 <li><a href="#valdef-list-style-image-none">value for list-style-image</a>, in §3.3 <li><a href="#valdef-list-style-type-none">value for list-style-type</a>, in §3.4 </ul> <li><a href="#list-style-position-outside">outside</a>, in §3.5 <li><a href="#counter-scope">scope</a>, in §4.3 <li><a href="#valdef-list-style-type-string"><string></a>, in §3.4 <li><a href="#css-counter-value">value</a>, in §4 </ul> <aside class="dfn-panel" data-for="term-for-cascade-origin-author"> <a href="https://www.w3.org/TR/css-cascade-4/#cascade-origin-author">https://www.w3.org/TR/css-cascade-4/#cascade-origin-author</a>Referenced in: <ul> <li><a href="#ref-for-cascade-origin-author">3.1.1. Properties Applying to ::marker</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-cascade"> <a href="https://www.w3.org/TR/css-cascade-4/#cascade">https://www.w3.org/TR/css-cascade-4/#cascade</a>Referenced in: <ul> <li><a href="#ref-for-cascade">3.1.1. Properties Applying to ::marker</a> <li><a href="#ref-for-cascade①">4.1. Creating Counters: the counter-reset property</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-computed-value"> <a href="https://www.w3.org/TR/css-cascade-4/#computed-value">https://www.w3.org/TR/css-cascade-4/#computed-value</a>Referenced in: <ul> <li><a href="#ref-for-computed-value">3.1.1. Properties Applying to ::marker</a> <li><a href="#ref-for-computed-value①">4.6. The Implicit list-item Counter</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-inheritance"> <a href="https://www.w3.org/TR/css-cascade-4/#inheritance">https://www.w3.org/TR/css-cascade-4/#inheritance</a>Referenced in: <ul> <li><a href="#ref-for-inheritance">4.4.1. Inheriting Counters</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-specified-value"> <a href="https://www.w3.org/TR/css-cascade-4/#specified-value">https://www.w3.org/TR/css-cascade-4/#specified-value</a>Referenced in: <ul> <li><a href="#ref-for-specified-value">4.6. The Implicit list-item Counter</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-used-value"> <a href="https://www.w3.org/TR/css-cascade-4/#used-value">https://www.w3.org/TR/css-cascade-4/#used-value</a>Referenced in: <ul> <li><a href="#ref-for-used-value">4.7. Outputting Counters: the counter() and counters() functions</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-cascade-origin-ua"> <a href="https://www.w3.org/TR/css-cascade-4/#cascade-origin-ua">https://www.w3.org/TR/css-cascade-4/#cascade-origin-ua</a>Referenced in: <ul> <li><a href="#ref-for-cascade-origin-ua">3.1.1. Properties Applying to ::marker</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-color"> <a href="https://www.w3.org/TR/css-color-4/#propdef-color">https://www.w3.org/TR/css-color-4/#propdef-color</a>Referenced in: <ul> <li><a href="#ref-for-propdef-color">3.1.1. Properties Applying to ::marker</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-content"> <a href="https://www.w3.org/TR/css-content-3/#propdef-content">https://www.w3.org/TR/css-content-3/#propdef-content</a>Referenced in: <ul> <li><a href="#ref-for-propdef-content">3.1. The ::marker Pseudo-Element</a> <li><a href="#ref-for-propdef-content①">3.1.1. Properties Applying to ::marker</a> <li><a href="#ref-for-propdef-content②">3.2. Generating Marker Contents</a> <a href="#ref-for-propdef-content③">(2)</a> <li><a href="#ref-for-propdef-content④">3.3. Image Markers: the list-style-image property</a> <li><a href="#ref-for-propdef-content⑤">3.4. Text-based Markers: the list-style-type property</a> <li><a href="#ref-for-propdef-content⑥">4.5. Counters in elements that do not generate boxes</a> <li><a href="#ref-for-propdef-content⑦">4.6. The Implicit list-item Counter</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-valdef-content-none"> <a href="https://www.w3.org/TR/css-content-3/#valdef-content-none">https://www.w3.org/TR/css-content-3/#valdef-content-none</a>Referenced in: <ul> <li><a href="#ref-for-valdef-content-none">3.1. The ::marker Pseudo-Element</a> <li><a href="#ref-for-valdef-content-none①">4.5. Counters in elements that do not generate boxes</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-valdef-content-normal"> <a href="https://www.w3.org/TR/css-content-3/#valdef-content-normal">https://www.w3.org/TR/css-content-3/#valdef-content-normal</a>Referenced in: <ul> <li><a href="#ref-for-valdef-content-normal">3.2. Generating Marker Contents</a> <li><a href="#ref-for-valdef-content-normal①">3.3. Image Markers: the list-style-image property</a> <li><a href="#ref-for-valdef-content-normal②">3.4. Text-based Markers: the list-style-type property</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-typedef-counter-style"> <a href="https://www.w3.org/TR/css-counter-styles-3/#typedef-counter-style">https://www.w3.org/TR/css-counter-styles-3/#typedef-counter-style</a>Referenced in: <ul> <li><a href="#ref-for-typedef-counter-style">3.4. Text-based Markers: the list-style-type property</a> <a href="#ref-for-typedef-counter-style①">(2)</a> <a href="#ref-for-typedef-counter-style②">(3)</a> <a href="#ref-for-typedef-counter-style③">(4)</a> <a href="#ref-for-typedef-counter-style④">(5)</a> <a href="#ref-for-typedef-counter-style⑤">(6)</a> <a href="#ref-for-typedef-counter-style⑥">(7)</a> <li><a href="#ref-for-typedef-counter-style⑦">3.6. Styling Markers: the list-style shorthand property</a> <li><a href="#ref-for-typedef-counter-style⑧">4.7. Outputting Counters: the counter() and counters() functions</a> <a href="#ref-for-typedef-counter-style⑨">(2)</a> <a href="#ref-for-typedef-counter-style①⓪">(3)</a> <a href="#ref-for-typedef-counter-style①①">(4)</a> <a href="#ref-for-typedef-counter-style①②">(5)</a> <a href="#ref-for-typedef-counter-style①③">(6)</a> <li><a href="#ref-for-typedef-counter-style①④">Changes From CSS Level 2</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-counter-style"> <a href="https://www.w3.org/TR/css-counter-styles-3/#counter-style">https://www.w3.org/TR/css-counter-styles-3/#counter-style</a>Referenced in: <ul> <li><a href="#ref-for-counter-style">4.7. Outputting Counters: the counter() and counters() functions</a> <a href="#ref-for-counter-style①">(2)</a> <a href="#ref-for-counter-style②">(3)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-decimal"> <a href="https://www.w3.org/TR/css-counter-styles-3/#decimal">https://www.w3.org/TR/css-counter-styles-3/#decimal</a>Referenced in: <ul> <li><a href="#ref-for-decimal">3.4. Text-based Markers: the list-style-type property</a> <li><a href="#ref-for-decimal①">4.7. Outputting Counters: the counter() and counters() functions</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-generate-a-counter"> <a href="https://www.w3.org/TR/css-counter-styles-3/#generate-a-counter">https://www.w3.org/TR/css-counter-styles-3/#generate-a-counter</a>Referenced in: <ul> <li><a href="#ref-for-generate-a-counter">3.4. Text-based Markers: the list-style-type property</a> <li><a href="#ref-for-generate-a-counter①">4.7. Outputting Counters: the counter() and counters() functions</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-descdef-counter-style-prefix"> <a href="https://www.w3.org/TR/css-counter-styles-3/#descdef-counter-style-prefix">https://www.w3.org/TR/css-counter-styles-3/#descdef-counter-style-prefix</a>Referenced in: <ul> <li><a href="#ref-for-descdef-counter-style-prefix">3.4. Text-based Markers: the list-style-type property</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-descdef-counter-style-suffix"> <a href="https://www.w3.org/TR/css-counter-styles-3/#descdef-counter-style-suffix">https://www.w3.org/TR/css-counter-styles-3/#descdef-counter-style-suffix</a>Referenced in: <ul> <li><a href="#ref-for-descdef-counter-style-suffix">3.4. Text-based Markers: the list-style-type property</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-anonymous"> <a href="https://www.w3.org/TR/css-display-3/#anonymous">https://www.w3.org/TR/css-display-3/#anonymous</a>Referenced in: <ul> <li><a href="#ref-for-anonymous">3.2. Generating Marker Contents</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-block-container"> <a href="https://www.w3.org/TR/css-display-3/#block-container">https://www.w3.org/TR/css-display-3/#block-container</a>Referenced in: <ul> <li><a href="#ref-for-block-container">3.5. Positioning Markers: The list-style-position property</a> <a href="#ref-for-block-container①">(2)</a> <li><a href="#ref-for-block-container②">Changes since the 17 August 2019 WD</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-display"> <a href="https://www.w3.org/TR/css-display-3/#propdef-display">https://www.w3.org/TR/css-display-3/#propdef-display</a>Referenced in: <ul> <li><a href="#ref-for-propdef-display">2. Declaring a List Item</a> <li><a href="#ref-for-propdef-display①">4.5. Counters in elements that do not generate boxes</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-display-type"> <a href="https://www.w3.org/TR/css-display-3/#display-type">https://www.w3.org/TR/css-display-3/#display-type</a>Referenced in: <ul> <li><a href="#ref-for-display-type">1. Introduction</a> <li><a href="#ref-for-display-type①">3. Markers</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-inline"> <a href="https://www.w3.org/TR/css-display-3/#inline">https://www.w3.org/TR/css-display-3/#inline</a>Referenced in: <ul> <li><a href="#ref-for-inline">3.2. Generating Marker Contents</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-inline-box"> <a href="https://www.w3.org/TR/css-display-3/#inline-box">https://www.w3.org/TR/css-display-3/#inline-box</a>Referenced in: <ul> <li><a href="#ref-for-inline-box">3.5. Positioning Markers: The list-style-position property</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-inline-level"> <a href="https://www.w3.org/TR/css-display-3/#inline-level">https://www.w3.org/TR/css-display-3/#inline-level</a>Referenced in: <ul> <li><a href="#ref-for-inline-level">Changes From CSS Level 2</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-valdef-display-list-item"> <a href="https://www.w3.org/TR/css-display-3/#valdef-display-list-item">https://www.w3.org/TR/css-display-3/#valdef-display-list-item</a>Referenced in: <ul> <li><a href="#ref-for-valdef-display-list-item">2. Declaring a List Item</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-valdef-display-none"> <a href="https://www.w3.org/TR/css-display-3/#valdef-display-none">https://www.w3.org/TR/css-display-3/#valdef-display-none</a>Referenced in: <ul> <li><a href="#ref-for-valdef-display-none">4.5. Counters in elements that do not generate boxes</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-outer-display-type"> <a href="https://www.w3.org/TR/css-display-3/#outer-display-type">https://www.w3.org/TR/css-display-3/#outer-display-type</a>Referenced in: <ul> <li><a href="#ref-for-outer-display-type">Changes since the 17 August 2019 WD</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-principal-box"> <a href="https://www.w3.org/TR/css-display-3/#principal-box">https://www.w3.org/TR/css-display-3/#principal-box</a>Referenced in: <ul> <li><a href="#ref-for-principal-box">3.5. Positioning Markers: The list-style-position property</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-replaced-element"> <a href="https://www.w3.org/TR/css-display-3/#replaced-element">https://www.w3.org/TR/css-display-3/#replaced-element</a>Referenced in: <ul> <li><a href="#ref-for-replaced-element">3.2. Generating Marker Contents</a> <li><a href="#ref-for-replaced-element①">4.5. Counters in elements that do not generate boxes</a> <a href="#ref-for-replaced-element②">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-text-run"> <a href="https://www.w3.org/TR/css-display-3/#text-run">https://www.w3.org/TR/css-display-3/#text-run</a>Referenced in: <ul> <li><a href="#ref-for-text-run">3.2. Generating Marker Contents</a> <a href="#ref-for-text-run①">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-order"> <a href="https://www.w3.org/TR/css-flexbox-1/#propdef-order">https://www.w3.org/TR/css-flexbox-1/#propdef-order</a>Referenced in: <ul> <li><a href="#ref-for-propdef-order">4.7. Outputting Counters: the counter() and counters() functions</a> <a href="#ref-for-propdef-order①">(2)</a> <a href="#ref-for-propdef-order②">(3)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-typedef-image"> <a href="https://www.w3.org/TR/css-images-3/#typedef-image">https://www.w3.org/TR/css-images-3/#typedef-image</a>Referenced in: <ul> <li><a href="#ref-for-typedef-image">3.3. Image Markers: the list-style-image property</a> <a href="#ref-for-typedef-image①">(2)</a> <a href="#ref-for-typedef-image②">(3)</a> <a href="#ref-for-typedef-image③">(4)</a> <a href="#ref-for-typedef-image④">(5)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-invalid-image"> <a href="https://www.w3.org/TR/css-images-4/#invalid-image">https://www.w3.org/TR/css-images-4/#invalid-image</a>Referenced in: <ul> <li><a href="#ref-for-invalid-image">3.3. Image Markers: the list-style-image property</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-overflow"> <a href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow">https://www.w3.org/TR/css-overflow-3/#propdef-overflow</a>Referenced in: <ul> <li><a href="#ref-for-propdef-overflow">3.5. Positioning Markers: The list-style-position property</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-valdef-overflow-visible"> <a href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-visible">https://www.w3.org/TR/css-overflow-3/#valdef-overflow-visible</a>Referenced in: <ul> <li><a href="#ref-for-valdef-overflow-visible">3.5. Positioning Markers: The list-style-position property</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-position"> <a href="https://www.w3.org/TR/css-position-3/#propdef-position">https://www.w3.org/TR/css-position-3/#propdef-position</a>Referenced in: <ul> <li><a href="#ref-for-propdef-position">Changes since the 20 March 2014 WD</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-selectordef-after"> <a href="https://www.w3.org/TR/css-pseudo-4/#selectordef-after">https://www.w3.org/TR/css-pseudo-4/#selectordef-after</a>Referenced in: <ul> <li><a href="#ref-for-selectordef-after">3.1.1. Properties Applying to ::marker</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-selectordef-before"> <a href="https://www.w3.org/TR/css-pseudo-4/#selectordef-before">https://www.w3.org/TR/css-pseudo-4/#selectordef-before</a>Referenced in: <ul> <li><a href="#ref-for-selectordef-before">3.1. The ::marker Pseudo-Element</a> <li><a href="#ref-for-selectordef-before①">3.1.1. Properties Applying to ::marker</a> <li><a href="#ref-for-selectordef-before②">3.2. Generating Marker Contents</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-selectordef-marker"> <a href="https://www.w3.org/TR/css-pseudo-4/#selectordef-marker">https://www.w3.org/TR/css-pseudo-4/#selectordef-marker</a>Referenced in: <ul> <li><a href="#ref-for-selectordef-marker">1. Introduction</a> <li><a href="#ref-for-selectordef-marker①">2. Declaring a List Item</a> <li><a href="#ref-for-selectordef-marker②">3. Markers</a> <li><a href="#ref-for-selectordef-marker③">3.1. The ::marker Pseudo-Element</a> <a href="#ref-for-selectordef-marker④">(2)</a> <a href="#ref-for-selectordef-marker⑤">(3)</a> <a href="#ref-for-selectordef-marker⑥">(4)</a> <li><a href="#ref-for-selectordef-marker⑦">3.1.1. Properties Applying to ::marker</a> <a href="#ref-for-selectordef-marker⑧">(2)</a> <a href="#ref-for-selectordef-marker⑨">(3)</a> <a href="#ref-for-selectordef-marker①⓪">(4)</a> <a href="#ref-for-selectordef-marker①①">(5)</a> <a href="#ref-for-selectordef-marker①②">(6)</a> <a href="#ref-for-selectordef-marker①③">(7)</a> <li><a href="#ref-for-selectordef-marker①④">3.2. Generating Marker Contents</a> <a href="#ref-for-selectordef-marker①⑤">(2)</a> <li><a href="#ref-for-selectordef-marker①⑥">3.5. Positioning Markers: The list-style-position property</a> <a href="#ref-for-selectordef-marker①⑦">(2)</a> <li><a href="#ref-for-selectordef-marker①⑧">3.7. The marker-side property</a> <a href="#ref-for-selectordef-marker①⑨">(2)</a> <a href="#ref-for-selectordef-marker②⓪">(3)</a> <li><a href="#ref-for-selectordef-marker②①">Changes since the 9 July 2020 WD</a> <a href="#ref-for-selectordef-marker②②">(2)</a> <a href="#ref-for-selectordef-marker②③">(3)</a> <li><a href="#ref-for-selectordef-marker②④">Changes since the 17 August 2019 WD</a> <a href="#ref-for-selectordef-marker②⑤">(2)</a> <li><a href="#ref-for-selectordef-marker②⑥">Changes From CSS Level 2</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-css-invalid"> <a href="https://www.w3.org/TR/css-syntax-3/#css-invalid">https://www.w3.org/TR/css-syntax-3/#css-invalid</a>Referenced in: <ul> <li><a href="#ref-for-css-invalid">4. Automatic Numbering With Counters</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-forced-line-break"> <a href="https://www.w3.org/TR/css-text-3/#forced-line-break">https://www.w3.org/TR/css-text-3/#forced-line-break</a>Referenced in: <ul> <li><a href="#ref-for-forced-line-break">3.2. Generating Marker Contents</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-letter-spacing"> <a href="https://www.w3.org/TR/css-text-3/#propdef-letter-spacing">https://www.w3.org/TR/css-text-3/#propdef-letter-spacing</a>Referenced in: <ul> <li><a href="#ref-for-propdef-letter-spacing">3.1.1. Properties Applying to ::marker</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-text-transform"> <a href="https://www.w3.org/TR/css-text-3/#propdef-text-transform">https://www.w3.org/TR/css-text-3/#propdef-text-transform</a>Referenced in: <ul> <li><a href="#ref-for-propdef-text-transform">3.1.1. Properties Applying to ::marker</a> <li><a href="#ref-for-propdef-text-transform①">Changes since the 9 July 2020 WD</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-white-space"> <a href="https://www.w3.org/TR/css-text-3/#propdef-white-space">https://www.w3.org/TR/css-text-3/#propdef-white-space</a>Referenced in: <ul> <li><a href="#ref-for-propdef-white-space">3.1.1. Properties Applying to ::marker</a> <a href="#ref-for-propdef-white-space①">(2)</a> <li><a href="#ref-for-propdef-white-space②">Changes since the 17 August 2019 WD</a> <a href="#ref-for-propdef-white-space③">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-text-space-collapse"> <a href="https://drafts.csswg.org/css-text-4/#propdef-text-space-collapse">https://drafts.csswg.org/css-text-4/#propdef-text-space-collapse</a>Referenced in: <ul> <li><a href="#ref-for-propdef-text-space-collapse">3.1.1. Properties Applying to ::marker</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-text-space-trim"> <a href="https://drafts.csswg.org/css-text-4/#propdef-text-space-trim">https://drafts.csswg.org/css-text-4/#propdef-text-space-trim</a>Referenced in: <ul> <li><a href="#ref-for-propdef-text-space-trim">3.1.1. Properties Applying to ::marker</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-integer-value"> <a href="https://www.w3.org/TR/css-values-3/#integer-value">https://www.w3.org/TR/css-values-3/#integer-value</a>Referenced in: <ul> <li><a href="#ref-for-integer-value">4.1. Creating Counters: the counter-reset property</a> <a href="#ref-for-integer-value①">(2)</a> <a href="#ref-for-integer-value②">(3)</a> <li><a href="#ref-for-integer-value③">4.2. Manipulating Counter Values: the counter-increment and counter-set properties</a> <a href="#ref-for-integer-value④">(2)</a> <a href="#ref-for-integer-value⑤">(3)</a> <a href="#ref-for-integer-value⑥">(4)</a> <a href="#ref-for-integer-value⑦">(5)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-string-value"> <a href="https://www.w3.org/TR/css-values-3/#string-value">https://www.w3.org/TR/css-values-3/#string-value</a>Referenced in: <ul> <li><a href="#ref-for-string-value">3.4. Text-based Markers: the list-style-type property</a> <a href="#ref-for-string-value①">(2)</a> <a href="#ref-for-string-value②">(3)</a> <li><a href="#ref-for-string-value③">4.7. Outputting Counters: the counter() and counters() functions</a> <a href="#ref-for-string-value④">(2)</a> <li><a href="#ref-for-string-value⑤">Changes From CSS Level 2</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-mult-one-plus"> <a href="https://www.w3.org/TR/css-values-4/#mult-one-plus">https://www.w3.org/TR/css-values-4/#mult-one-plus</a>Referenced in: <ul> <li><a href="#ref-for-mult-one-plus">4.1. Creating Counters: the counter-reset property</a> <li><a href="#ref-for-mult-one-plus①">4.2. Manipulating Counter Values: the counter-increment and counter-set properties</a> <a href="#ref-for-mult-one-plus②">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-identifier-value"> <a href="https://www.w3.org/TR/css-values-4/#identifier-value">https://www.w3.org/TR/css-values-4/#identifier-value</a>Referenced in: <ul> <li><a href="#ref-for-identifier-value">3.6. Styling Markers: the list-style shorthand property</a> <li><a href="#ref-for-identifier-value①">4. Automatic Numbering With Counters</a> <li><a href="#ref-for-identifier-value②">Changes since the 20 March 2014 WD</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-mult-opt"> <a href="https://www.w3.org/TR/css-values-4/#mult-opt">https://www.w3.org/TR/css-values-4/#mult-opt</a>Referenced in: <ul> <li><a href="#ref-for-mult-opt">4.1. Creating Counters: the counter-reset property</a> <li><a href="#ref-for-mult-opt①">4.2. Manipulating Counter Values: the counter-increment and counter-set properties</a> <a href="#ref-for-mult-opt②">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-funcdef-calc"> <a href="https://www.w3.org/TR/css-values-4/#funcdef-calc">https://www.w3.org/TR/css-values-4/#funcdef-calc</a>Referenced in: <ul> <li><a href="#ref-for-funcdef-calc">4.7. Outputting Counters: the counter() and counters() functions</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-css-wide-keywords"> <a href="https://www.w3.org/TR/css-values-4/#css-wide-keywords">https://www.w3.org/TR/css-values-4/#css-wide-keywords</a>Referenced in: <ul> <li><a href="#ref-for-css-wide-keywords">1.1. Value Definitions</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-functional-notation"> <a href="https://www.w3.org/TR/css-values-4/#functional-notation">https://www.w3.org/TR/css-values-4/#functional-notation</a>Referenced in: <ul> <li><a href="#ref-for-functional-notation">4. Automatic Numbering With Counters</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-comb-one"> <a href="https://www.w3.org/TR/css-values-4/#comb-one">https://www.w3.org/TR/css-values-4/#comb-one</a>Referenced in: <ul> <li><a href="#ref-for-comb-one">3.3. Image Markers: the list-style-image property</a> <li><a href="#ref-for-comb-one①">3.4. Text-based Markers: the list-style-type property</a> <a href="#ref-for-comb-one②">(2)</a> <li><a href="#ref-for-comb-one③">3.5. Positioning Markers: The list-style-position property</a> <li><a href="#ref-for-comb-one④">3.7. The marker-side property</a> <li><a href="#ref-for-comb-one⑤">4.1. Creating Counters: the counter-reset property</a> <li><a href="#ref-for-comb-one⑥">4.2. Manipulating Counter Values: the counter-increment and counter-set properties</a> <a href="#ref-for-comb-one⑦">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-comb-any"> <a href="https://www.w3.org/TR/css-values-4/#comb-any">https://www.w3.org/TR/css-values-4/#comb-any</a>Referenced in: <ul> <li><a href="#ref-for-comb-any">3.6. Styling Markers: the list-style shorthand property</a> <a href="#ref-for-comb-any①">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-custom-property"> <a href="https://www.w3.org/TR/css-variables-1/#custom-property">https://www.w3.org/TR/css-variables-1/#custom-property</a>Referenced in: <ul> <li><a href="#ref-for-custom-property">4.7. Outputting Counters: the counter() and counters() functions</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-direction"> <a href="https://www.w3.org/TR/css-writing-modes-3/#propdef-direction">https://www.w3.org/TR/css-writing-modes-3/#propdef-direction</a>Referenced in: <ul> <li><a href="#ref-for-propdef-direction">3.1.1. Properties Applying to ::marker</a> <li><a href="#ref-for-propdef-direction①">3.7. The marker-side property</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-unicode-bidi"> <a href="https://www.w3.org/TR/css-writing-modes-3/#propdef-unicode-bidi">https://www.w3.org/TR/css-writing-modes-3/#propdef-unicode-bidi</a>Referenced in: <ul> <li><a href="#ref-for-propdef-unicode-bidi">3.1.1. Properties Applying to ::marker</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-inline-start"> <a href="https://www.w3.org/TR/css-writing-modes-4/#inline-start">https://www.w3.org/TR/css-writing-modes-4/#inline-start</a>Referenced in: <ul> <li><a href="#ref-for-inline-start">3.5. Positioning Markers: The list-style-position property</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-text-combine-upright"> <a href="https://www.w3.org/TR/css-writing-modes-4/#propdef-text-combine-upright">https://www.w3.org/TR/css-writing-modes-4/#propdef-text-combine-upright</a>Referenced in: <ul> <li><a href="#ref-for-propdef-text-combine-upright">3.1.1. Properties Applying to ::marker</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-writing-mode"> <a href="https://www.w3.org/TR/css-writing-modes-4/#writing-mode">https://www.w3.org/TR/css-writing-modes-4/#writing-mode</a>Referenced in: <ul> <li><a href="#ref-for-writing-mode">3.5. Positioning Markers: The list-style-position property</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-valdef-visibility-hidden"> <a href="https://drafts.csswg.org/css2/#valdef-visibility-hidden">https://drafts.csswg.org/css2/#valdef-visibility-hidden</a>Referenced in: <ul> <li><a href="#ref-for-valdef-visibility-hidden">4.5. Counters in elements that do not generate boxes</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-valdef-counter-reset-none"> <a href="https://drafts.csswg.org/css2/#valdef-counter-reset-none">https://drafts.csswg.org/css2/#valdef-counter-reset-none</a>Referenced in: <ul> <li><a href="#ref-for-valdef-counter-reset-none④">4.6. The Implicit list-item Counter</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-visibility"> <a href="https://www.w3.org/TR/CSS2/visufx.html#propdef-visibility">https://www.w3.org/TR/CSS2/visufx.html#propdef-visibility</a>Referenced in: <ul> <li><a href="#ref-for-propdef-visibility">4.5. Counters in elements that do not generate boxes</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-concept-tree-root"> <a href="https://dom.spec.whatwg.org/#concept-tree-root">https://dom.spec.whatwg.org/#concept-tree-root</a>Referenced in: <ul> <li><a href="#ref-for-concept-tree-root">4.4.1. Inheriting Counters</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-concept-tree-order"> <a href="https://dom.spec.whatwg.org/#concept-tree-order">https://dom.spec.whatwg.org/#concept-tree-order</a>Referenced in: <ul> <li><a href="#ref-for-concept-tree-order">4.4.1. Inheriting Counters</a> <a href="#ref-for-concept-tree-order①">(2)</a> <a href="#ref-for-concept-tree-order②">(3)</a> <a href="#ref-for-concept-tree-order③">(4)</a> <a href="#ref-for-concept-tree-order④">(5)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-the-li-element"> <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element">https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element</a>Referenced in: <ul> <li><a href="#ref-for-the-li-element">3.6. Styling Markers: the list-style shorthand property</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-the-ol-element"> <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-ol-element">https://html.spec.whatwg.org/multipage/grouping-content.html#the-ol-element</a>Referenced in: <ul> <li><a href="#ref-for-the-ol-element">3.6. Styling Markers: the list-style shorthand property</a> <li><a href="#ref-for-the-ol-element①">4.3. Nested Counters and Scope</a> <a href="#ref-for-the-ol-element②">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-the-option-element"> <a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-option-element">https://html.spec.whatwg.org/multipage/form-elements.html#the-option-element</a>Referenced in: <ul> <li><a href="#ref-for-the-option-element">4.5. Counters in elements that do not generate boxes</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-the-ul-element"> <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element">https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element</a>Referenced in: <ul> <li><a href="#ref-for-the-ul-element">3.6. Styling Markers: the list-style shorthand property</a> <a href="#ref-for-the-ul-element①">(2)</a> <li><a href="#ref-for-the-ul-element②">4.4.1. Inheriting Counters</a> <a href="#ref-for-the-ul-element③">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-set-append"> <a href="https://infra.spec.whatwg.org/#set-append">https://infra.spec.whatwg.org/#set-append</a>Referenced in: <ul> <li><a href="#ref-for-set-append">4.4.2. Instantiating Counters</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-list-contain"> <a href="https://infra.spec.whatwg.org/#list-contain">https://infra.spec.whatwg.org/#list-contain</a>Referenced in: <ul> <li><a href="#ref-for-list-contain">4.4.1. Inheriting Counters</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-map-iterate"> <a href="https://infra.spec.whatwg.org/#map-iterate">https://infra.spec.whatwg.org/#map-iterate</a>Referenced in: <ul> <li><a href="#ref-for-map-iterate">4.4.1. Inheriting Counters</a> <a href="#ref-for-map-iterate①">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-list-remove"> <a href="https://infra.spec.whatwg.org/#list-remove">https://infra.spec.whatwg.org/#list-remove</a>Referenced in: <ul> <li><a href="#ref-for-list-remove">4.4.2. Instantiating Counters</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-ordered-set"> <a href="https://infra.spec.whatwg.org/#ordered-set">https://infra.spec.whatwg.org/#ordered-set</a>Referenced in: <ul> <li><a href="#ref-for-ordered-set">4.4. Creating and Inheriting Counters</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-string"> <a href="https://infra.spec.whatwg.org/#string">https://infra.spec.whatwg.org/#string</a>Referenced in: <ul> <li><a href="#ref-for-string">4.4. Creating and Inheriting Counters</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-tuple"> <a href="https://infra.spec.whatwg.org/#tuple">https://infra.spec.whatwg.org/#tuple</a>Referenced in: <ul> <li><a href="#ref-for-tuple">4.4. Creating and Inheriting Counters</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-compound"> <a href="https://www.w3.org/TR/selectors-4/#compound">https://www.w3.org/TR/selectors-4/#compound</a>Referenced in: <ul> <li><a href="#ref-for-compound">3.1.1. Properties Applying to ::marker</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-originating-element"> <a href="https://www.w3.org/TR/selectors-4/#originating-element">https://www.w3.org/TR/selectors-4/#originating-element</a>Referenced in: <ul> <li><a href="#ref-for-originating-element">3.1.1. Properties Applying to ::marker</a> <li><a href="#ref-for-originating-element①">3.2. Generating Marker Contents</a> <a href="#ref-for-originating-element②">(2)</a> <li><a href="#ref-for-originating-element③">3.7. The marker-side property</a> <a href="#ref-for-originating-element④">(2)</a> <a href="#ref-for-originating-element⑤">(3)</a> <a href="#ref-for-originating-element⑥">(4)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-pseudo-element"> <a href="https://www.w3.org/TR/selectors-4/#pseudo-element">https://www.w3.org/TR/selectors-4/#pseudo-element</a>Referenced in: <ul> <li><a href="#ref-for-pseudo-element">3.1.1. Properties Applying to ::marker</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-selector"> <a href="https://www.w3.org/TR/selectors-4/#selector">https://www.w3.org/TR/selectors-4/#selector</a>Referenced in: <ul> <li><a href="#ref-for-selector">3.1.1. Properties Applying to ::marker</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-elementdef-rect"> <a href="https://www.w3.org/TR/SVG2/shapes.html#elementdef-rect">https://www.w3.org/TR/SVG2/shapes.html#elementdef-rect</a>Referenced in: <ul> <li><a href="#ref-for-elementdef-rect">4.5. Counters in elements that do not generate boxes</a> </ul> </aside> <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere">Terms defined by reference<a class="self-link" href="#index-defined-elsewhere"></a></h3> <ul class="index"> <li> <a data-link-type="biblio">[css-cascade-4]</a> defines the following terms: <ul> <li>author origin <li>cascade <li>computed value <li>inheritance <li>specified value <li>used value <li>user-agent origin </ul> <li> <a data-link-type="biblio">[css-color-4]</a> defines the following terms: <ul> <li>color </ul> <li> <a data-link-type="biblio">[css-content-3]</a> defines the following terms: <ul> <li>content <li>none <li>normal </ul> <li> <a data-link-type="biblio">[css-counter-styles-3]</a> defines the following terms: <ul> <li><counter-style> <li>counter style <li>decimal <li>generate a counter representation <li>prefix <li>suffix </ul> <li> <a data-link-type="biblio">[CSS-DISPLAY-3]</a> defines the following terms: <ul> <li>anonymous <li>block container <li>display <li>display type <li>inline <li>inline box <li>inline-level <li>list-item <li>none <li>outer display type <li>principal box <li>replaced element <li>text run </ul> <li> <a data-link-type="biblio">[css-flexbox-1]</a> defines the following terms: <ul> <li>order </ul> <li> <a data-link-type="biblio">[css-images-3]</a> defines the following terms: <ul> <li><image> </ul> <li> <a data-link-type="biblio">[css-images-4]</a> defines the following terms: <ul> <li>valid image </ul> <li> <a data-link-type="biblio">[css-overflow-3]</a> defines the following terms: <ul> <li>overflow <li>visible </ul> <li> <a data-link-type="biblio">[css-position-3]</a> defines the following terms: <ul> <li>position </ul> <li> <a data-link-type="biblio">[CSS-PSEUDO-4]</a> defines the following terms: <ul> <li>::after <li>::before <li>::marker </ul> <li> <a data-link-type="biblio">[css-syntax-3]</a> defines the following terms: <ul> <li>invalid </ul> <li> <a data-link-type="biblio">[CSS-TEXT-3]</a> defines the following terms: <ul> <li>forced line break <li>letter-spacing <li>text-transform <li>white-space </ul> <li> <a data-link-type="biblio">[css-text-4]</a> defines the following terms: <ul> <li>text-space-collapse <li>text-space-trim </ul> <li> <a data-link-type="biblio">[CSS-VALUES-3]</a> defines the following terms: <ul> <li><integer> <li><string> </ul> <li> <a data-link-type="biblio">[css-values-4]</a> defines the following terms: <ul> <li>+ <li><custom-ident> <li>? <li>calc() <li>css-wide keywords <li>functional notation <li>| <li>|| </ul> <li> <a data-link-type="biblio">[css-variables-1]</a> defines the following terms: <ul> <li>custom property </ul> <li> <a data-link-type="biblio">[CSS-WRITING-MODES-3]</a> defines the following terms: <ul> <li>direction <li>unicode-bidi </ul> <li> <a data-link-type="biblio">[css-writing-modes-4]</a> defines the following terms: <ul> <li>inline-start <li>text-combine-upright <li>writing mode </ul> <li> <a data-link-type="biblio">[CSS2]</a> defines the following terms: <ul> <li>hidden <li>none <li>visibility </ul> <li> <a data-link-type="biblio">[DOM]</a> defines the following terms: <ul> <li>root <li>tree order </ul> <li> <a data-link-type="biblio">[HTML]</a> defines the following terms: <ul> <li>li <li>ol <li>option <li>ul </ul> <li> <a data-link-type="biblio">[INFRA]</a> defines the following terms: <ul> <li>append <li>contain <li>for each <li>remove <li>set <li>string <li>tuple </ul> <li> <a data-link-type="biblio">[SELECTORS-4]</a> defines the following terms: <ul> <li>compound selector <li>originating element <li>pseudo-element <li>selector </ul> <li> <a data-link-type="biblio">[SVG2]</a> defines the following terms: <ul> <li>rect </ul> </ul> <h2 class="no-num no-ref heading settled" id="references">References<a class="self-link" href="#references"></a></h2> <h3 class="no-num no-ref heading settled" id="normative">Normative References<a class="self-link" href="#normative"></a></h3> <dl> <dt id="biblio-css-cascade-4">[CSS-CASCADE-4] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-4/">CSS Cascading and Inheritance Level 4</a>. 18 August 2020. WD. URL: <a href="https://www.w3.org/TR/css-cascade-4/">https://www.w3.org/TR/css-cascade-4/</a> <dt id="biblio-css-content-3">[CSS-CONTENT-3] <dd>Elika Etemad; Dave Cramer. <a href="https://www.w3.org/TR/css-content-3/">CSS Generated Content Module Level 3</a>. 2 August 2019. WD. URL: <a href="https://www.w3.org/TR/css-content-3/">https://www.w3.org/TR/css-content-3/</a> <dt id="biblio-css-counter-styles-3">[CSS-COUNTER-STYLES-3] <dd>Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-counter-styles-3/">CSS Counter Styles Level 3</a>. 14 December 2017. CR. URL: <a href="https://www.w3.org/TR/css-counter-styles-3/">https://www.w3.org/TR/css-counter-styles-3/</a> <dt id="biblio-css-display-3">[CSS-DISPLAY-3] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-display-3/">CSS Display Module Level 3</a>. 19 May 2020. CR. URL: <a href="https://www.w3.org/TR/css-display-3/">https://www.w3.org/TR/css-display-3/</a> <dt id="biblio-css-flexbox-1">[CSS-FLEXBOX-1] <dd>Tab Atkins Jr.; et al. <a href="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout Module Level 1</a>. 19 November 2018. CR. URL: <a href="https://www.w3.org/TR/css-flexbox-1/">https://www.w3.org/TR/css-flexbox-1/</a> <dt id="biblio-css-images-3">[CSS-IMAGES-3] <dd>Tab Atkins Jr.; Elika Etemad; Lea Verou. <a href="https://www.w3.org/TR/css-images-3/">CSS Images Module Level 3</a>. 10 October 2019. CR. URL: <a href="https://www.w3.org/TR/css-images-3/">https://www.w3.org/TR/css-images-3/</a> <dt id="biblio-css-images-4">[CSS-IMAGES-4] <dd>Tab Atkins Jr.; Elika Etemad; Lea Verou. <a href="https://www.w3.org/TR/css-images-4/">CSS Image Values and Replaced Content Module Level 4</a>. 13 April 2017. WD. URL: <a href="https://www.w3.org/TR/css-images-4/">https://www.w3.org/TR/css-images-4/</a> <dt id="biblio-css-overflow-3">[CSS-OVERFLOW-3] <dd>David Baron; Elika Etemad; Florian Rivoal. <a href="https://www.w3.org/TR/css-overflow-3/">CSS Overflow Module Level 3</a>. 3 June 2020. WD. URL: <a href="https://www.w3.org/TR/css-overflow-3/">https://www.w3.org/TR/css-overflow-3/</a> <dt id="biblio-css-position-3">[CSS-POSITION-3] <dd>Elika Etemad; et al. <a href="https://www.w3.org/TR/css-position-3/">CSS Positioned Layout Module Level 3</a>. 19 May 2020. WD. URL: <a href="https://www.w3.org/TR/css-position-3/">https://www.w3.org/TR/css-position-3/</a> <dt id="biblio-css-pseudo-4">[CSS-PSEUDO-4] <dd>Daniel Glazman; Elika Etemad; Alan Stearns. <a href="https://www.w3.org/TR/css-pseudo-4/">CSS Pseudo-Elements Module Level 4</a>. 25 February 2019. WD. URL: <a href="https://www.w3.org/TR/css-pseudo-4/">https://www.w3.org/TR/css-pseudo-4/</a> <dt id="biblio-css-syntax-3">[CSS-SYNTAX-3] <dd>Tab Atkins Jr.; Simon Sapin. <a href="https://www.w3.org/TR/css-syntax-3/">CSS Syntax Module Level 3</a>. 16 July 2019. CR. URL: <a href="https://www.w3.org/TR/css-syntax-3/">https://www.w3.org/TR/css-syntax-3/</a> <dt id="biblio-css-text-3">[CSS-TEXT-3] <dd>Elika Etemad; Koji Ishii; Florian Rivoal. <a href="https://www.w3.org/TR/css-text-3/">CSS Text Module Level 3</a>. 29 April 2020. WD. URL: <a href="https://www.w3.org/TR/css-text-3/">https://www.w3.org/TR/css-text-3/</a> <dt id="biblio-css-text-4">[CSS-TEXT-4] <dd>Elika Etemad; et al. <a href="https://www.w3.org/TR/css-text-4/">CSS Text Module Level 4</a>. 13 November 2019. WD. URL: <a href="https://www.w3.org/TR/css-text-4/">https://www.w3.org/TR/css-text-4/</a> <dt id="biblio-css-values-3">[CSS-VALUES-3] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-3/">CSS Values and Units Module Level 3</a>. 6 June 2019. CR. URL: <a href="https://www.w3.org/TR/css-values-3/">https://www.w3.org/TR/css-values-3/</a> <dt id="biblio-css-values-4">[CSS-VALUES-4] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Module Level 4</a>. 31 January 2019. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a> <dt id="biblio-css-variables-1">[CSS-VARIABLES-1] <dd>Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-variables-1/">CSS Custom Properties for Cascading Variables Module Level 1</a>. 3 December 2015. CR. URL: <a href="https://www.w3.org/TR/css-variables-1/">https://www.w3.org/TR/css-variables-1/</a> <dt id="biblio-css-writing-modes-3">[CSS-WRITING-MODES-3] <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-writing-modes-3/">CSS Writing Modes Level 3</a>. 10 December 2019. REC. URL: <a href="https://www.w3.org/TR/css-writing-modes-3/">https://www.w3.org/TR/css-writing-modes-3/</a> <dt id="biblio-css-writing-modes-4">[CSS-WRITING-MODES-4] <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-writing-modes-4/">CSS Writing Modes Level 4</a>. 30 July 2019. CR. URL: <a href="https://www.w3.org/TR/css-writing-modes-4/">https://www.w3.org/TR/css-writing-modes-4/</a> <dt id="biblio-css2">[CSS2] <dd>Bert Bos; et al. <a href="https://www.w3.org/TR/CSS21/">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href="https://www.w3.org/TR/CSS21/">https://www.w3.org/TR/CSS21/</a> <dt id="biblio-dom">[DOM] <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a> <dt id="biblio-html">[HTML] <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a> <dt id="biblio-infra">[INFRA] <dd>Anne van Kesteren; Domenic Denicola. <a href="https://infra.spec.whatwg.org/">Infra Standard</a>. Living Standard. URL: <a href="https://infra.spec.whatwg.org/">https://infra.spec.whatwg.org/</a> <dt id="biblio-rfc2119">[RFC2119] <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a> <dt id="biblio-selectors-4">[SELECTORS-4] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/selectors-4/">Selectors Level 4</a>. 21 November 2018. WD. URL: <a href="https://www.w3.org/TR/selectors-4/">https://www.w3.org/TR/selectors-4/</a> <dt id="biblio-svg2">[SVG2] <dd>Amelia Bellamy-Royds; et al. <a href="https://www.w3.org/TR/SVG2/">Scalable Vector Graphics (SVG) 2</a>. 4 October 2018. CR. URL: <a href="https://www.w3.org/TR/SVG2/">https://www.w3.org/TR/SVG2/</a> </dl> <h3 class="no-num no-ref heading settled" id="informative">Informative References<a class="self-link" href="#informative"></a></h3> <dl> <dt id="biblio-css-animations-1">[CSS-ANIMATIONS-1] <dd>Dean Jackson; et al. <a href="https://www.w3.org/TR/css-animations-1/">CSS Animations Level 1</a>. 11 October 2018. WD. URL: <a href="https://www.w3.org/TR/css-animations-1/">https://www.w3.org/TR/css-animations-1/</a> <dt id="biblio-css-color-3">[CSS-COLOR-3] <dd>Tantek Çelik; Chris Lilley; David Baron. <a href="https://www.w3.org/TR/css-color-3/">CSS Color Module Level 3</a>. 19 June 2018. REC. URL: <a href="https://www.w3.org/TR/css-color-3/">https://www.w3.org/TR/css-color-3/</a> <dt id="biblio-css-color-4">[CSS-COLOR-4] <dd>Tab Atkins Jr.; Chris Lilley. <a href="https://www.w3.org/TR/css-color-4/">CSS Color Module Level 4</a>. 5 November 2019. WD. URL: <a href="https://www.w3.org/TR/css-color-4/">https://www.w3.org/TR/css-color-4/</a> <dt id="biblio-css-fonts-3">[CSS-FONTS-3] <dd>John Daggett; Myles Maxfield; Chris Lilley. <a href="https://www.w3.org/TR/css-fonts-3/">CSS Fonts Module Level 3</a>. 20 September 2018. REC. URL: <a href="https://www.w3.org/TR/css-fonts-3/">https://www.w3.org/TR/css-fonts-3/</a> <dt id="biblio-css-transitions-1">[CSS-TRANSITIONS-1] <dd>David Baron; et al. <a href="https://www.w3.org/TR/css-transitions-1/">CSS Transitions</a>. 11 October 2018. WD. URL: <a href="https://www.w3.org/TR/css-transitions-1/">https://www.w3.org/TR/css-transitions-1/</a> </dl> <h2 class="no-num no-ref heading settled" id="property-index">Property Index<a class="self-link" href="#property-index"></a></h2> <div class="big-element-wrapper"> <table class="index"> <thead> <tr> <th scope="col">Name <th scope="col">Value <th scope="col">Initial <th scope="col">Applies to <th scope="col">Inh. <th scope="col">%ages <th scope="col">Animation type <th scope="col">Canonical order <th scope="col">Computed value <tbody> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-counter-increment" id="ref-for-propdef-counter-increment①⑥">counter-increment</a> <td>[ <counter-name> <integer>? ]+ | none <td>none <td>all elements <td>no <td>n/a <td>by computed value type <td>per grammar <td>the keyword none or a list, each item an identifier paired with an integer <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-counter-reset" id="ref-for-propdef-counter-reset⑥">counter-reset</a> <td>[ <counter-name> <integer>? ]+ | none <td>none <td>all elements <td>no <td>n/a <td>by computed value type <td>per grammar <td>the keyword none or a list, each item an identifier paired with an integer <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-counter-set" id="ref-for-propdef-counter-set①⓪">counter-set</a> <td>[ <counter-name> <integer>? ]+ | none <td>none <td>all elements <td>no <td>n/a <td>by computed value type <td>per grammar <td>the keyword none or a list, each item an identifier paired with an integer <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-list-style" id="ref-for-propdef-list-style⑥">list-style</a> <td><'list-style-position'> || <'list-style-image'> || <'list-style-type'> <td>see individual properties <td>list items <td>see individual properties <td>see individual properties <td>see individual properties <td>per grammar <td>see individual properties <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-list-style-image" id="ref-for-propdef-list-style-image⑥">list-style-image</a> <td><image> | none <td>none <td>list items <td>yes <td>n/a <td>discrete <td>per grammar <td>the keyword noneor the computed <image> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-list-style-position" id="ref-for-propdef-list-style-position③">list-style-position</a> <td>inside | outside <td>outside <td>list items <td>yes <td>n/a <td>discrete <td>per grammar <td>keyword, but see prose <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-list-style-type" id="ref-for-propdef-list-style-type①①">list-style-type</a> <td><counter-style> | <string> | none <td>disc <td>list items <td>yes <td>n/a <td>discrete <td>per grammar <td>specified value <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-marker-side" id="ref-for-propdef-marker-side⑤">marker-side</a> <td>match-self | match-parent <td>match-self <td>list items <td>yes <td>n/a <td>discrete <td>per grammar <td>specified keyword </table> </div> <h2 class="no-num no-ref heading settled" id="issues-index">Issues Index<a class="self-link" href="#issues-index"></a></h2> <div style="counter-reset:issue"> <div class="issue"> <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#propdef-white-space">white-space: pre</a> doesn’t have quite the right behavior; <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-4/#propdef-text-space-collapse">text-space-collapse: preserve-spaces</a> + <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-4/#propdef-text-space-trim">text-space-trim: discard-after</a> might be closer to what’s needed here. See discussion in <a href="https://github.com/w3c/csswg-drafts/issues/4448">Issue 4448</a> and <a href="https://github.com/w3c/csswg-drafts/issues/4891">Issue 4891</a>.<a href="#issue-04da870c"> ↵ </a></div> <div class="issue"> This is handwavey nonsense from CSS2, and needs a real definition.<a href="#issue-ffa70ac6"> ↵ </a></div> <div class="issue"> Alternatively, <a class="css" data-link-type="maybe" href="#list-style-position-outside">outside</a> could lay out the marker as a previous sibling of the principal inline box.<a href="#issue-bf311ada"> ↵ </a></div> <div class="issue"> For this order punctuation inside the marker correctly, it would also need to take the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-direction">direction</a> value of the parent. <a href="https://github.com/w3c/csswg-drafts/issues/4202"><https://github.com/w3c/csswg-drafts/issues/4202></a><a href="#issue-91830b42"> ↵ </a></div> <div class="issue"> There are issues open on <a href="https://github.com/w3c/csswg-drafts/issues/5308">renaming the keywords</a> and on <a href="https://github.com/w3c/csswg-drafts/issues/4209">merging with list-style-position</a>.<a href="#issue-69d20ea1"> ↵ </a></div> <div class="issue"> Counters are sometimes useful for things other than printing markers. In general, they provide the ability to number elements in sequence, which can be useful for other properties to reference. For example, using <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-flexbox-1/#propdef-order">order</a> to put an element between two other specific elements currently requires you to explicitly put order on every element before and/or after the desired insertion point. If you can set the order value of everything to a counter, tho, you can more easily insert an element into an arbitrary spot between two others. Other use-cases involve nested or sibling elements with transforms that are meant to be slightly different from each other. Today you have to use a preprocessor to do this in a reasonable way, but a counter would make it work well in "plain" CSS. (You can built up successive values in the nested case today by using <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#custom-property">custom properties</a> and stacking up nested <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-values-4/#funcdef-calc">calc()</a>s, but this is a *little bit* clumsy, and doesn’t work for siblings.) Suggestion is to add a counter-value(<a class="production css" data-link-type="type" href="#typedef-counter-name"><counter-name></a>) function, which returns the value of the named counter as an integer, rather than returning a string. See <a href="https://github.com/w3c/csswg-drafts/issues/1026">Issue 1026</a>. <a href="#issue-4b0c2d48"> ↵ </a> </div> <div class="issue"> Discussion of how to support <code>ol[reversed]</code> list numbering in CSS is ongoing. See, e.g. <a href="https://github.com/w3c/csswg-drafts/issues/4181">Issue 4181</a>.<a href="#issue-33887700"> ↵ </a></div> </div> <aside class="dfn-panel" data-for="list-item"> <a href="#list-item">#list-item</a>Referenced in: <ul> <li><a href="#ref-for-list-item">2. Declaring a List Item</a> <a href="#ref-for-list-item①">(2)</a> <li><a href="#ref-for-list-item②">3. Markers</a> <a href="#ref-for-list-item③">(2)</a> <a href="#ref-for-list-item④">(3)</a> <a href="#ref-for-list-item⑤">(4)</a> <a href="#ref-for-list-item⑥">(5)</a> <li><a href="#ref-for-list-item⑦">3.1. The ::marker Pseudo-Element</a> <a href="#ref-for-list-item⑧">(2)</a> <a href="#ref-for-list-item⑨">(3)</a> <li><a href="#ref-for-list-item①⓪">3.3. Image Markers: the list-style-image property</a> <a href="#ref-for-list-item①①">(2)</a> <li><a href="#ref-for-list-item①②">3.4. Text-based Markers: the list-style-type property</a> <a href="#ref-for-list-item①③">(2)</a> <li><a href="#ref-for-list-item①④">3.5. Positioning Markers: The list-style-position property</a> <a href="#ref-for-list-item①⑤">(2)</a> <a href="#ref-for-list-item①⑥">(3)</a> <a href="#ref-for-list-item①⑦">(4)</a> <a href="#ref-for-list-item①⑧">(5)</a> <li><a href="#ref-for-list-item①⑨">3.6. Styling Markers: the list-style shorthand property</a> <li><a href="#ref-for-list-item②⓪">3.7. The marker-side property</a> <li><a href="#ref-for-list-item②①">4.6. The Implicit list-item Counter</a> <a href="#ref-for-list-item②②">(2)</a> <a href="#ref-for-list-item②③">(3)</a> <a href="#ref-for-list-item②④">(4)</a> <a href="#ref-for-list-item②⑤">(5)</a> <a href="#ref-for-list-item②⑥">(6)</a> <a href="#ref-for-list-item②⑦">(7)</a> <a href="#ref-for-list-item②⑧">(8)</a> <li><a href="#ref-for-list-item②⑨">Changes From CSS Level 2</a> </ul> </aside> <aside class="dfn-panel" data-for="marker"> <a href="#marker">#marker</a>Referenced in: <ul> <li><a href="#ref-for-marker">3. Markers</a> <a href="#ref-for-marker①">(2)</a> <a href="#ref-for-marker②">(3)</a> <li><a href="#ref-for-marker③">3.1. The ::marker Pseudo-Element</a> <a href="#ref-for-marker④">(2)</a> <li><a href="#ref-for-marker⑤">3.1.1. Properties Applying to ::marker</a> <a href="#ref-for-marker⑥">(2)</a> <a href="#ref-for-marker⑦">(3)</a> <li><a href="#ref-for-marker⑧">3.2. Generating Marker Contents</a> <a href="#ref-for-marker⑨">(2)</a> <a href="#ref-for-marker①⓪">(3)</a> <a href="#ref-for-marker①①">(4)</a> <a href="#ref-for-marker①②">(5)</a> <li><a href="#ref-for-marker①③">3.3. Image Markers: the list-style-image property</a> <li><a href="#ref-for-marker①④">3.4. Text-based Markers: the list-style-type property</a> <li><a href="#ref-for-marker①⑤">3.7. The marker-side property</a> <a href="#ref-for-marker①⑥">(2)</a> <a href="#ref-for-marker①⑦">(3)</a> </ul> </aside> <aside class="dfn-panel" data-for="propdef-list-style-image"> <a href="#propdef-list-style-image">#propdef-list-style-image</a>Referenced in: <ul> <li><a href="#ref-for-propdef-list-style-image">3. Markers</a> <li><a href="#ref-for-propdef-list-style-image①">3.2. Generating Marker Contents</a> <li><a href="#ref-for-propdef-list-style-image②">3.3. Image Markers: the list-style-image property</a> <li><a href="#ref-for-propdef-list-style-image③">3.6. Styling Markers: the list-style shorthand property</a> <a href="#ref-for-propdef-list-style-image④">(2)</a> <a href="#ref-for-propdef-list-style-image⑤">(3)</a> </ul> </aside> <aside class="dfn-panel" data-for="marker-image"> <a href="#marker-image">#marker-image</a>Referenced in: <ul> <li><a href="#ref-for-marker-image">3.2. Generating Marker Contents</a> <a href="#ref-for-marker-image①">(2)</a> <li><a href="#ref-for-marker-image②">3.3. Image Markers: the list-style-image property</a> <a href="#ref-for-marker-image③">(2)</a> <a href="#ref-for-marker-image④">(3)</a> <li><a href="#ref-for-marker-image⑤">3.4. Text-based Markers: the list-style-type property</a> </ul> </aside> <aside class="dfn-panel" data-for="valdef-list-style-image-none"> <a href="#valdef-list-style-image-none">#valdef-list-style-image-none</a>Referenced in: <ul> <li><a href="#ref-for-valdef-list-style-image-none">3.3. Image Markers: the list-style-image property</a> </ul> </aside> <aside class="dfn-panel" data-for="propdef-list-style-type"> <a href="#propdef-list-style-type">#propdef-list-style-type</a>Referenced in: <ul> <li><a href="#ref-for-propdef-list-style-type">3. Markers</a> <li><a href="#ref-for-propdef-list-style-type①">3.2. Generating Marker Contents</a> <li><a href="#ref-for-propdef-list-style-type②">3.4. Text-based Markers: the list-style-type property</a> <li><a href="#ref-for-propdef-list-style-type③">3.6. Styling Markers: the list-style shorthand property</a> <a href="#ref-for-propdef-list-style-type④">(2)</a> <a href="#ref-for-propdef-list-style-type⑤">(3)</a> <a href="#ref-for-propdef-list-style-type⑥">(4)</a> <li><a href="#ref-for-propdef-list-style-type⑦">4.6. The Implicit list-item Counter</a> <a href="#ref-for-propdef-list-style-type⑧">(2)</a> <li><a href="#ref-for-propdef-list-style-type⑨">Changes since the 20 March 2014 WD</a> <li><a href="#ref-for-propdef-list-style-type①⓪">Changes From CSS Level 2</a> </ul> </aside> <aside class="dfn-panel" data-for="marker-string"> <a href="#marker-string">#marker-string</a>Referenced in: <ul> <li><a href="#ref-for-marker-string">3.2. Generating Marker Contents</a> <a href="#ref-for-marker-string①">(2)</a> <li><a href="#ref-for-marker-string②">3.4. Text-based Markers: the list-style-type property</a> <a href="#ref-for-marker-string③">(2)</a> <a href="#ref-for-marker-string④">(3)</a> <a href="#ref-for-marker-string⑤">(4)</a> <li><a href="#ref-for-marker-string⑥">4.6. The Implicit list-item Counter</a> </ul> </aside> <aside class="dfn-panel" data-for="propdef-list-style-position"> <a href="#propdef-list-style-position">#propdef-list-style-position</a>Referenced in: <ul> <li><a href="#ref-for-propdef-list-style-position">3.5. Positioning Markers: The list-style-position property</a> <li><a href="#ref-for-propdef-list-style-position①">3.6. Styling Markers: the list-style shorthand property</a> <a href="#ref-for-propdef-list-style-position②">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="valdef-list-style-position-inside"> <a href="#valdef-list-style-position-inside">#valdef-list-style-position-inside</a>Referenced in: <ul> <li><a href="#ref-for-valdef-list-style-position-inside">3.5. Positioning Markers: The list-style-position property</a> </ul> </aside> <aside class="dfn-panel" data-for="list-style-position-outside"> <a href="#list-style-position-outside">#list-style-position-outside</a>Referenced in: <ul> <li><a href="#ref-for-list-style-position-outside">3.5. Positioning Markers: The list-style-position property</a> <li><a href="#ref-for-list-style-position-outside①">3.7. The marker-side property</a> <li><a href="#ref-for-list-style-position-outside②">Changes since the 17 August 2019 WD</a> </ul> </aside> <aside class="dfn-panel" data-for="propdef-list-style"> <a href="#propdef-list-style">#propdef-list-style</a>Referenced in: <ul> <li><a href="#ref-for-propdef-list-style">3.6. Styling Markers: the list-style shorthand property</a> <a href="#ref-for-propdef-list-style①">(2)</a> <a href="#ref-for-propdef-list-style②">(3)</a> <a href="#ref-for-propdef-list-style③">(4)</a> <li><a href="#ref-for-propdef-list-style④">4.3. Nested Counters and Scope</a> <li><a href="#ref-for-propdef-list-style⑤">Changes since the 20 March 2014 WD</a> </ul> </aside> <aside class="dfn-panel" data-for="propdef-marker-side"> <a href="#propdef-marker-side">#propdef-marker-side</a>Referenced in: <ul> <li><a href="#ref-for-propdef-marker-side">3.5. Positioning Markers: The list-style-position property</a> <li><a href="#ref-for-propdef-marker-side①">3.7. The marker-side property</a> <a href="#ref-for-propdef-marker-side②">(2)</a> <a href="#ref-for-propdef-marker-side③">(3)</a> <li><a href="#ref-for-propdef-marker-side④">Changes since the 20 March 2014 WD</a> </ul> </aside> <aside class="dfn-panel" data-for="valdef-marker-side-match-self"> <a href="#valdef-marker-side-match-self">#valdef-marker-side-match-self</a>Referenced in: <ul> <li><a href="#ref-for-valdef-marker-side-match-self">3.7. The marker-side property</a> </ul> </aside> <aside class="dfn-panel" data-for="valdef-marker-side-match-parent"> <a href="#valdef-marker-side-match-parent">#valdef-marker-side-match-parent</a>Referenced in: <ul> <li><a href="#ref-for-valdef-marker-side-match-parent">3.7. The marker-side property</a> </ul> </aside> <aside class="dfn-panel" data-for="counter"> <a href="#counter">#counter</a>Referenced in: <ul> <li><a href="#ref-for-counter">1. Introduction</a> <li><a href="#ref-for-counter①">2. Declaring a List Item</a> <li><a href="#ref-for-counter②">4. Automatic Numbering With Counters</a> <a href="#ref-for-counter③">(2)</a> <li><a href="#ref-for-counter④">4.1. Creating Counters: the counter-reset property</a> <li><a href="#ref-for-counter⑤">4.2. Manipulating Counter Values: the counter-increment and counter-set properties</a> <li><a href="#ref-for-counter⑥">4.3. Nested Counters and Scope</a> <a href="#ref-for-counter⑦">(2)</a> <li><a href="#ref-for-counter⑧">4.4. Creating and Inheriting Counters</a> <a href="#ref-for-counter⑨">(2)</a> <li><a href="#ref-for-counter①⓪">4.4.1. Inheriting Counters</a> <li><a href="#ref-for-counter①①">4.4.2. Instantiating Counters</a> <a href="#ref-for-counter①②">(2)</a> <a href="#ref-for-counter①③">(3)</a> <a href="#ref-for-counter①④">(4)</a> <a href="#ref-for-counter①⑤">(5)</a> <a href="#ref-for-counter①⑥">(6)</a> <li><a href="#ref-for-counter①⑦">4.6. The Implicit list-item Counter</a> <a href="#ref-for-counter①⑧">(2)</a> <a href="#ref-for-counter①⑨">(3)</a> <a href="#ref-for-counter②⓪">(4)</a> <a href="#ref-for-counter②①">(5)</a> <a href="#ref-for-counter②②">(6)</a> <li><a href="#ref-for-counter②③">4.7. Outputting Counters: the counter() and counters() functions</a> <a href="#ref-for-counter②④">(2)</a> <a href="#ref-for-counter②⑤">(3)</a> <a href="#ref-for-counter②⑥">(4)</a> </ul> </aside> <aside class="dfn-panel" data-for="css-counter-name"> <a href="#css-counter-name">#css-counter-name</a>Referenced in: <ul> <li><a href="#ref-for-css-counter-name">4.4. Creating and Inheriting Counters</a> <li><a href="#ref-for-css-counter-name①">4.4.1. Inheriting Counters</a> <a href="#ref-for-css-counter-name②">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="css-counter-creator"> <a href="#css-counter-creator">#css-counter-creator</a>Referenced in: <ul> <li><a href="#ref-for-css-counter-creator">4.4. Creating and Inheriting Counters</a> <li><a href="#ref-for-css-counter-creator①">4.4.1. Inheriting Counters</a> </ul> </aside> <aside class="dfn-panel" data-for="css-counter-value"> <a href="#css-counter-value">#css-counter-value</a>Referenced in: <ul> <li><a href="#ref-for-css-counter-value">4.4. Creating and Inheriting Counters</a> <li><a href="#ref-for-css-counter-value①">4.4.1. Inheriting Counters</a> <a href="#ref-for-css-counter-value②">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="typedef-counter-name"> <a href="#typedef-counter-name">#typedef-counter-name</a>Referenced in: <ul> <li><a href="#ref-for-typedef-counter-name">4. Automatic Numbering With Counters</a> <a href="#ref-for-typedef-counter-name①">(2)</a> <a href="#ref-for-typedef-counter-name②">(3)</a> <li><a href="#ref-for-typedef-counter-name③">4.1. Creating Counters: the counter-reset property</a> <a href="#ref-for-typedef-counter-name④">(2)</a> <a href="#ref-for-typedef-counter-name⑤">(3)</a> <a href="#ref-for-typedef-counter-name⑥">(4)</a> <li><a href="#ref-for-typedef-counter-name⑦">4.2. Manipulating Counter Values: the counter-increment and counter-set properties</a> <a href="#ref-for-typedef-counter-name⑧">(2)</a> <a href="#ref-for-typedef-counter-name⑨">(3)</a> <a href="#ref-for-typedef-counter-name①⓪">(4)</a> <li><a href="#ref-for-typedef-counter-name①①">4.7. Outputting Counters: the counter() and counters() functions</a> <a href="#ref-for-typedef-counter-name①②">(2)</a> <a href="#ref-for-typedef-counter-name①③">(3)</a> <a href="#ref-for-typedef-counter-name①④">(4)</a> <a href="#ref-for-typedef-counter-name①⑤">(5)</a> <a href="#ref-for-typedef-counter-name①⑥">(6)</a> </ul> </aside> <aside class="dfn-panel" data-for="propdef-counter-reset"> <a href="#propdef-counter-reset">#propdef-counter-reset</a>Referenced in: <ul> <li><a href="#ref-for-propdef-counter-reset">4. Automatic Numbering With Counters</a> <a href="#ref-for-propdef-counter-reset①">(2)</a> <li><a href="#ref-for-propdef-counter-reset②">4.1. Creating Counters: the counter-reset property</a> <a href="#ref-for-propdef-counter-reset③">(2)</a> <li><a href="#ref-for-propdef-counter-reset④">4.3. Nested Counters and Scope</a> <li><a href="#ref-for-propdef-counter-reset⑤">4.4.2. Instantiating Counters</a> </ul> </aside> <aside class="dfn-panel" data-for="valdef-counter-reset-none"> <a href="#valdef-counter-reset-none">#valdef-counter-reset-none</a>Referenced in: <ul> <li><a href="#ref-for-valdef-counter-reset-none">4. Automatic Numbering With Counters</a> <li><a href="#ref-for-valdef-counter-reset-none①">4.1. Creating Counters: the counter-reset property</a> <li><a href="#ref-for-valdef-counter-reset-none②">4.2. Manipulating Counter Values: the counter-increment and counter-set properties</a> <a href="#ref-for-valdef-counter-reset-none③">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="propdef-counter-increment"> <a href="#propdef-counter-increment">#propdef-counter-increment</a>Referenced in: <ul> <li><a href="#ref-for-propdef-counter-increment">4. Automatic Numbering With Counters</a> <a href="#ref-for-propdef-counter-increment①">(2)</a> <li><a href="#ref-for-propdef-counter-increment②">4.1. Creating Counters: the counter-reset property</a> <li><a href="#ref-for-propdef-counter-increment③">4.2. Manipulating Counter Values: the counter-increment and counter-set properties</a> <a href="#ref-for-propdef-counter-increment④">(2)</a> <a href="#ref-for-propdef-counter-increment⑤">(3)</a> <a href="#ref-for-propdef-counter-increment⑥">(4)</a> <li><a href="#ref-for-propdef-counter-increment⑦">4.4.2. Instantiating Counters</a> <li><a href="#ref-for-propdef-counter-increment⑧">4.6. The Implicit list-item Counter</a> <a href="#ref-for-propdef-counter-increment⑨">(2)</a> <a href="#ref-for-propdef-counter-increment①⓪">(3)</a> <a href="#ref-for-propdef-counter-increment①①">(4)</a> <a href="#ref-for-propdef-counter-increment①②">(5)</a> <a href="#ref-for-propdef-counter-increment①③">(6)</a> <a href="#ref-for-propdef-counter-increment①④">(7)</a> <li><a href="#ref-for-propdef-counter-increment①⑤">Changes since the 20 March 2014 WD</a> </ul> </aside> <aside class="dfn-panel" data-for="propdef-counter-set"> <a href="#propdef-counter-set">#propdef-counter-set</a>Referenced in: <ul> <li><a href="#ref-for-propdef-counter-set">4. Automatic Numbering With Counters</a> <a href="#ref-for-propdef-counter-set①">(2)</a> <li><a href="#ref-for-propdef-counter-set②">4.1. Creating Counters: the counter-reset property</a> <li><a href="#ref-for-propdef-counter-set③">4.2. Manipulating Counter Values: the counter-increment and counter-set properties</a> <a href="#ref-for-propdef-counter-set④">(2)</a> <a href="#ref-for-propdef-counter-set⑤">(3)</a> <a href="#ref-for-propdef-counter-set⑥">(4)</a> <li><a href="#ref-for-propdef-counter-set⑦">4.4.2. Instantiating Counters</a> <li><a href="#ref-for-propdef-counter-set⑧">Changes since the 20 March 2014 WD</a> <li><a href="#ref-for-propdef-counter-set⑨">Changes From CSS Level 2</a> </ul> </aside> <aside class="dfn-panel" data-for="counter-scope"> <a href="#counter-scope">#counter-scope</a>Referenced in: <ul> <li><a href="#ref-for-counter-scope">4.4. Creating and Inheriting Counters</a> </ul> </aside> <aside class="dfn-panel" data-for="css-counters-set"> <a href="#css-counters-set">#css-counters-set</a>Referenced in: <ul> <li><a href="#ref-for-css-counters-set">4.4.1. Inheriting Counters</a> <a href="#ref-for-css-counters-set①">(2)</a> <a href="#ref-for-css-counters-set②">(3)</a> <a href="#ref-for-css-counters-set③">(4)</a> <a href="#ref-for-css-counters-set④">(5)</a> <a href="#ref-for-css-counters-set⑤">(6)</a> <li><a href="#ref-for-css-counters-set⑥">4.4.2. Instantiating Counters</a> <li><a href="#ref-for-css-counters-set⑦">4.7. Outputting Counters: the counter() and counters() functions</a> <a href="#ref-for-css-counters-set⑧">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="innermost"> <a href="#innermost">#innermost</a>Referenced in: <ul> <li><a href="#ref-for-innermost">4.3. Nested Counters and Scope</a> <li><a href="#ref-for-innermost①">4.7. Outputting Counters: the counter() and counters() functions</a> <a href="#ref-for-innermost②">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="inherit-counters"> <a href="#inherit-counters">#inherit-counters</a>Referenced in: <ul> <li><a href="#ref-for-inherit-counters">4. Automatic Numbering With Counters</a> <li><a href="#ref-for-inherit-counters①">4.4.1. Inheriting Counters</a> </ul> </aside> <aside class="dfn-panel" data-for="instantiate-counter"> <a href="#instantiate-counter">#instantiate-counter</a>Referenced in: <ul> <li><a href="#ref-for-instantiate-counter">4. Automatic Numbering With Counters</a> <li><a href="#ref-for-instantiate-counter①">4.1. Creating Counters: the counter-reset property</a> <a href="#ref-for-instantiate-counter②">(2)</a> <li><a href="#ref-for-instantiate-counter③">4.2. Manipulating Counter Values: the counter-increment and counter-set properties</a> <a href="#ref-for-instantiate-counter④">(2)</a> <li><a href="#ref-for-instantiate-counter⑤">4.3. Nested Counters and Scope</a> <a href="#ref-for-instantiate-counter⑥">(2)</a> <li><a href="#ref-for-instantiate-counter⑦">4.4.2. Instantiating Counters</a> <a href="#ref-for-instantiate-counter⑧">(2)</a> <li><a href="#ref-for-instantiate-counter⑨">4.6. The Implicit list-item Counter</a> <li><a href="#ref-for-instantiate-counter①⓪">4.7. Outputting Counters: the counter() and counters() functions</a> </ul> </aside> <aside class="dfn-panel" data-for="valdef-counter-increment-list-item"> <a href="#valdef-counter-increment-list-item">#valdef-counter-increment-list-item</a>Referenced in: <ul> <li><a href="#ref-for-valdef-counter-increment-list-item">1. Introduction</a> <li><a href="#ref-for-valdef-counter-increment-list-item①">2. Declaring a List Item</a> <li><a href="#ref-for-valdef-counter-increment-list-item②">3.4. Text-based Markers: the list-style-type property</a> <a href="#ref-for-valdef-counter-increment-list-item③">(2)</a> <li><a href="#ref-for-valdef-counter-increment-list-item④">4.6. The Implicit list-item Counter</a> <a href="#ref-for-valdef-counter-increment-list-item⑤">(2)</a> <a href="#ref-for-valdef-counter-increment-list-item⑥">(3)</a> <a href="#ref-for-valdef-counter-increment-list-item⑦">(4)</a> <a href="#ref-for-valdef-counter-increment-list-item⑧">(5)</a> <a href="#ref-for-valdef-counter-increment-list-item⑨">(6)</a> <a href="#ref-for-valdef-counter-increment-list-item①⓪">(7)</a> <a href="#ref-for-valdef-counter-increment-list-item①①">(8)</a> <a href="#ref-for-valdef-counter-increment-list-item①②">(9)</a> <a href="#ref-for-valdef-counter-increment-list-item①③">(10)</a> <a href="#ref-for-valdef-counter-increment-list-item①④">(11)</a> <li><a href="#ref-for-valdef-counter-increment-list-item①⑤">Changes since the 20 March 2014 WD</a> <li><a href="#ref-for-valdef-counter-increment-list-item①⑥">Changes From CSS Level 2</a> </ul> </aside> <aside class="dfn-panel" data-for="typedef-counter"> <a href="#typedef-counter">#typedef-counter</a>Referenced in: <ul> <li><a href="#ref-for-typedef-counter">4.7. Outputting Counters: the counter() and counters() functions</a> </ul> </aside> <aside class="dfn-panel" data-for="funcdef-counter"> <a href="#funcdef-counter">#funcdef-counter</a>Referenced in: <ul> <li><a href="#ref-for-funcdef-counter">4. Automatic Numbering With Counters</a> <a href="#ref-for-funcdef-counter①">(2)</a> <li><a href="#ref-for-funcdef-counter②">4.3. Nested Counters and Scope</a> <li><a href="#ref-for-funcdef-counter③">4.4.2. Instantiating Counters</a> <li><a href="#ref-for-funcdef-counter④">4.7. Outputting Counters: the counter() and counters() functions</a> <a href="#ref-for-funcdef-counter⑤">(2)</a> <a href="#ref-for-funcdef-counter⑥">(3)</a> <a href="#ref-for-funcdef-counter⑦">(4)</a> </ul> </aside> <aside class="dfn-panel" data-for="funcdef-counters"> <a href="#funcdef-counters">#funcdef-counters</a>Referenced in: <ul> <li><a href="#ref-for-funcdef-counters">4. Automatic Numbering With Counters</a> <a href="#ref-for-funcdef-counters①">(2)</a> <li><a href="#ref-for-funcdef-counters②">4.3. Nested Counters and Scope</a> <li><a href="#ref-for-funcdef-counters③">4.4.2. Instantiating Counters</a> <li><a href="#ref-for-funcdef-counters④">4.7. Outputting Counters: the counter() and counters() functions</a> <a href="#ref-for-funcdef-counters⑤">(2)</a> <a href="#ref-for-funcdef-counters⑥">(3)</a> <a href="#ref-for-funcdef-counters⑦">(4)</a> <a href="#ref-for-funcdef-counters⑧">(5)</a> <a href="#ref-for-funcdef-counters⑨">(6)</a> </ul> </aside> <script>/* script-dfn-panel */ document.body.addEventListener("click", function(e) { var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); } // Find the dfn element or panel, if any, that was clicked on. var el = e.target; var target; var hitALink = false; while(el.parentElement) { if(el.tagName == "A") { // Clicking on a link in a <dfn> shouldn't summon the panel hitALink = true; } if(el.classList.contains("dfn-paneled")) { target = "dfn"; break; } if(el.classList.contains("dfn-panel")) { target = "dfn-panel"; break; } el = el.parentElement; } if(target != "dfn-panel") { // Turn off any currently "on" or "activated" panels. queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){ el.classList.remove("on"); el.classList.remove("activated"); }); } if(target == "dfn" && !hitALink) { // open the panel var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']"); if(dfnPanel) { dfnPanel.classList.add("on"); var rect = el.getBoundingClientRect(); dfnPanel.style.left = window.scrollX + rect.right + 5 + "px"; dfnPanel.style.top = window.scrollY + rect.top + "px"; var panelRect = dfnPanel.getBoundingClientRect(); var panelWidth = panelRect.right - panelRect.left; if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) { // Reposition, because the panel is overflowing dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px"; } } else { console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']"); } } else if(target == "dfn-panel") { // Switch it to "activated" state, which pins it. el.classList.add("activated"); el.style.left = null; el.style.top = null; } }); </script> <script>/* script-var-click-highlighting */ document.addEventListener("click", e=>{ if(e.target.nodeName == "VAR") { highlightSameAlgoVars(e.target); } }); { const indexCounts = new Map(); const indexNames = new Map(); function highlightSameAlgoVars(v) { // Find the algorithm container. let algoContainer = null; let searchEl = v; while(algoContainer == null && searchEl != document.body) { searchEl = searchEl.parentNode; if(searchEl.hasAttribute("data-algorithm")) { algoContainer = searchEl; } } // Not highlighting document-global vars, // too likely to be unrelated. if(algoContainer == null) return; const algoName = algoContainer.getAttribute("data-algorithm"); const varName = getVarName(v); const addClass = !v.classList.contains("selected"); let highlightClass = null; if(addClass) { const index = chooseHighlightIndex(algoName, varName); indexCounts.get(algoName)[index] += 1; indexNames.set(algoName+"///"+varName, index); highlightClass = nameFromIndex(index); } else { const index = previousHighlightIndex(algoName, varName); indexCounts.get(algoName)[index] -= 1; highlightClass = nameFromIndex(index); } // Find all same-name vars, and toggle their class appropriately. for(const el of algoContainer.querySelectorAll("var")) { if(getVarName(el) == varName) { el.classList.toggle("selected", addClass); el.classList.toggle(highlightClass, addClass); } } } function getVarName(el) { return el.textContent.replace(/(\s| )+/, " ").trim(); } function chooseHighlightIndex(algoName, varName) { let indexes = null; if(indexCounts.has(algoName)) { indexes = indexCounts.get(algoName); } else { // 7 classes right now indexes = [0,0,0,0,0,0,0]; indexCounts.set(algoName, indexes); } // If the element was recently unclicked, // *and* that color is still unclaimed, // give it back the same color. const lastIndex = previousHighlightIndex(algoName, varName); if(indexes[lastIndex] === 0) return lastIndex; // Find the earliest index with the lowest count. const minCount = Math.min.apply(null, indexes); let index = null; for(var i = 0; i < indexes.length; i++) { if(indexes[i] == minCount) { return i; } } } function previousHighlightIndex(algoName, varName) { return indexNames.get(algoName+"///"+varName); } function nameFromIndex(index) { return "selected" + index; } } </script>