CINXE.COM

<!doctype html><html lang="en"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"> <title>CSS Lists and Counters Module Level 3</title> <meta content="ED" name="w3c-status"> <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-ED" rel="stylesheet"> <meta content="Bikeshed version 47d87adb7, updated Tue Feb 18 17:18:43 2025 -0800" name="generator"> <link href="https://www.w3.org/TR/css-lists-3/" rel="canonical"> <link href="https://drafts.csswg.org/csslogo.ico" rel="icon"> <meta content="15faddb297701ab0b44b832cdb35af227867d645" name="revision"> <meta content="dark light" name="color-scheme"> <link href="https://www.w3.org/StyleSheets/TR/2021/dark.css" media="(prefers-color-scheme: dark)" rel="stylesheet" type="text/css"> <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>/* Boilerplate: 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; } @media (prefers-color-scheme: dark) { :root { --selflink-text: black; --selflink-bg: silver; --selflink-hover-text: white; } } </style> <style>/* Boilerplate: style-colors */ /* Any --*-text not paired with a --*-bg is assumed to have a transparent bg */ :root { color-scheme: light dark; --text: black; --bg: white; --unofficial-watermark: url(https://www.w3.org/StyleSheets/TR/2016/logos/UD-watermark); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #707070; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #f8f8f8; --tocnav-active-text: #c00; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #f7f8f9; --tocsidebar-shadow: rgba(0,0,0,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #3980b5; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #005a9c; --hr-text: var(--text); --algo-border: #def; --del-text: red; --del-bg: transparent; --ins-text: #080; --ins-bg: transparent; --a-normal-text: #034575; --a-normal-underline: #bbb; --a-visited-text: var(--a-normal-text); --a-visited-underline: #707070; --a-hover-bg: rgba(75%, 75%, 75%, .25); --a-active-text: #c00; --a-active-underline: #c00; --blockquote-border: silver; --blockquote-bg: transparent; --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: #fbe9e9; --issue-text: var(--text); --issueheading-text: #831616; --example-border: #e0cb52; --example-bg: #fcfaee; --example-text: var(--text); --exampleheading-text: #574b0f; --note-border: #52e052; --note-bg: #e9fbe9; --note-text: var(--text); --noteheading-text: hsl(120, 70%, 30%); --notesummary-underline: silver; --assertion-border: #aaa; --assertion-bg: #eee; --assertion-text: black; --advisement-border: orange; --advisement-bg: #fec; --advisement-text: var(--text); --advisementheading-text: #b35f00; --warning-border: red; --warning-bg: hsla(40,100%,50%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #F5F0FF; --amendment-text: var(--text); --amendmentheading-text: #220066; --def-border: #8ccbf2; --def-bg: #def; --def-text: var(--text); --defrow-border: #bbd7e9; --datacell-border: silver; --indexinfo-text: #707070; --indextable-hover-text: black; --indextable-hover-bg: #f7f8f9; --outdatedspec-bg: rgba(0, 0, 0, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } @media (prefers-color-scheme: dark) { :root { --text: #ddd; --bg: black; --unofficial-watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='%23100808' transform='translate(200 200) rotate(-45) translate(-200 -200)' stroke='%23100808' stroke-width='3'%3E%3Ctext x='50%25' y='220' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EUNOFFICIAL%3C/text%3E%3Ctext x='50%25' y='305' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EDRAFT%3C/text%3E%3C/g%3E%3C/svg%3E"); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #999; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #080808; --tocnav-active-text: #f44; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #080808; --tocsidebar-shadow: rgba(255,255,255,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #6af; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #8af; --hr-text: var(--text); --algo-border: #456; --del-text: #f44; --del-bg: transparent; --ins-text: #4a4; --ins-bg: transparent; --a-normal-text: #6af; --a-normal-underline: #555; --a-visited-text: var(--a-normal-text); --a-visited-underline: var(--a-normal-underline); --a-hover-bg: rgba(25%, 25%, 25%, .2); --a-active-text: #f44; --a-active-underline: var(--a-active-text); --borderedblock-bg: rgba(255, 255, 255, .05); --blockquote-border: silver; --blockquote-bg: var(--borderedblock-bg); --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: var(--borderedblock-bg); --issue-text: var(--text); --issueheading-text: hsl(0deg, 70%, 70%); --example-border: hsl(50deg, 90%, 60%); --example-bg: var(--borderedblock-bg); --example-text: var(--text); --exampleheading-text: hsl(50deg, 70%, 70%); --note-border: hsl(120deg, 100%, 35%); --note-bg: var(--borderedblock-bg); --note-text: var(--text); --noteheading-text: hsl(120, 70%, 70%); --notesummary-underline: silver; --assertion-border: #444; --assertion-bg: var(--borderedblock-bg); --assertion-text: var(--text); --advisement-border: orange; --advisement-bg: #222218; --advisement-text: var(--text); --advisementheading-text: #f84; --warning-border: red; --warning-bg: hsla(40,100%,20%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #080010; --amendment-text: var(--text); --amendmentheading-text: #cc00ff; --def-border: #8ccbf2; --def-bg: #080818; --def-text: var(--text); --defrow-border: #136; --datacell-border: silver; --indexinfo-text: #aaa; --indextable-hover-text: var(--text); --indextable-hover-bg: #181818; --outdatedspec-bg: rgba(255, 255, 255, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } /* In case a transparent-bg image doesn't expect to be on a dark bg, which is quite common in practice... */ img { background: white; } } </style> <style>/* Boilerplate: 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>/* Boilerplate: style-dfn-panel */ :root { --dfnpanel-bg: #ddd; --dfnpanel-text: var(--text); --dfnpanel-target-bg: #ffc; --dfnpanel-target-outline: orange; } @media (prefers-color-scheme: dark) { :root { --dfnpanel-bg: #222; --dfnpanel-text: var(--text); --dfnpanel-target-bg: #333; --dfnpanel-target-outline: silver; } } .dfn-panel { position: absolute; z-index: 35; width: 20em; width: 300px; height: auto; 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; white-space: normal; /* in case it's moved into a pre */ } .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 a:focus { outline: 5px auto Highlight; outline: 5px auto -webkit-focus-ring-color; } .dfn-panel > b + b { margin-top: 0.25em; } .dfn-panel ul { padding: 0 0 0 1em; list-style: none; } .dfn-panel li a { max-width: calc(300px - 1.5em - 1em); overflow: hidden; text-overflow: ellipsis; } .dfn-panel.activated { display: inline-block; position: fixed; left: 8px; bottom: 2em; margin: 0 auto; max-width: calc(100vw - 1.5em - .4em - .5em); max-height: 30vh; transition: left 1s ease-out, bottom 1s ease-out; } .dfn-panel .link-item:hover { text-decoration: underline; } .dfn-panel .link-item .copy-icon { opacity: 0; } .dfn-panel .link-item:hover .copy-icon, .dfn-panel .link-item .copy-icon:focus { opacity: 1; } .dfn-panel .copy-icon { display: inline-block; margin-right: 0.5em; width: 0.85em; height: 1em; border-radius: 3px; background-color: #ccc; cursor: pointer; } .dfn-panel .copy-icon .icon { width: 100%; height: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center; position: relative; } .dfn-panel .copy-icon .icon::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid black; background-color: #ccc; opacity: 0.25; transform: translate(3px, -3px); } .dfn-panel .copy-icon:active .icon::before { opacity: 1; } .dfn-paneled[role="button"] { cursor: help; } .highlighted { animation: target-fade 3s; } @keyframes target-fade { from { background-color: var(--dfnpanel-target-bg); outline: 5px solid var(--dfnpanel-target-outline); } to { color: var(--a-normal-text); background-color: transparent; outline: transparent; } } </style> <style>/* Boilerplate: style-issues */ a[href].issue-return { float: right; float: inline-end; color: var(--issueheading-text); font-weight: bold; text-decoration: none; } </style> <style>/* Boilerplate: 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>/* Boilerplate: style-mdn-anno */ :root { --mdn-bg: #EEE; --mdn-shadow: #999; --mdn-nosupport-text: #ccc; --mdn-pass: green; --mdn-fail: red; } @media (prefers-color-scheme: dark) { :root { --mdn-bg: #222; --mdn-shadow: #444; --mdn-nosupport-text: #666; --mdn-pass: #690; --mdn-fail: #d22; } } .mdn-anno { background: var(--mdn-bg, #EEE); border-radius: .25em; box-shadow: 0 0 3px var(--mdn-shadow, #999); color: var(--text, black); font: 1em sans-serif; hyphens: none; max-width: min-content; overflow: hidden; padding: 0.2em; position: absolute; right: 0.3em; top: auto; white-space: nowrap; word-wrap: normal; z-index: 8; } .mdn-anno.unpositioned { display: none; } .mdn-anno.overlapping-main { opacity: .2; transition: opacity .1s; } .mdn-anno[open] { opacity: 1; z-index: 9; min-width: 9em; } .mdn-anno:hover { opacity: 1; outline: var(--text, black) 1px solid; } .mdn-anno > summary { font-weight: normal; text-align: right; cursor: pointer; display: block; } .mdn-anno > summary > .less-than-two-engines-flag { color: var(--mdn-fail); padding-right: 2px; } .mdn-anno > summary > .all-engines-flag { color: var(--mdn-pass); padding-right: 2px; } .mdn-anno > summary > span { color: #fff; background-color: #000; font-weight: normal; font-family: zillaslab, Palatino, "Palatino Linotype", serif; padding: 2px 3px 0px 3px; line-height: 1.3em; vertical-align: top; } .mdn-anno > .feature { margin-top: 20px; } .mdn-anno > .feature:not(:first-of-type) { border-top: 1px solid #999; margin-top: 6px; padding-top: 2px; } .mdn-anno > .feature > .less-than-two-engines-text { color: var(--mdn-fail); } .mdn-anno > .feature > .all-engines-text { color: var(--mdn-pass); } .mdn-anno > .feature > p { font-size: .75em; margin-top: 6px; margin-bottom: 0; } .mdn-anno > .feature > p + p { margin-top: 3px; } .mdn-anno > .feature > .support { display: block; font-size: 0.6em; margin: 0; padding: 0; margin-top: 2px; } .mdn-anno > .feature > .support + div { padding-top: 0.5em; } .mdn-anno > .feature > .support > hr { display: block; border: none; border-top: 1px dotted #999; padding: 3px 0px 0px 0px; margin: 2px 3px 0px 3px; } .mdn-anno > .feature > .support > hr::before { content: ""; } .mdn-anno > .feature > .support > span { padding: 0.2em 0; display: block; display: table; } .mdn-anno > .feature > .support > span.no { color: var(--mdn-nosupport-text); filter: grayscale(100%); } .mdn-anno > .feature > .support > span.no::before { opacity: 0.5; } .mdn-anno > .feature > .support > span:first-of-type { padding-top: 0.5em; } .mdn-anno > .feature > .support > span > span { padding: 0 0.5em; display: table-cell; } .mdn-anno > .feature > .support > span > span:first-child { width: 100%; } .mdn-anno > .feature > .support > span > span:last-child { width: 100%; white-space: pre; padding: 0; } .mdn-anno > .feature > .support > span::before { content: ' '; display: table-cell; min-width: 1.5em; height: 1.5em; background: no-repeat center center; background-size: contain; text-align: right; font-size: 0.75em; font-weight: bold; } .mdn-anno > .feature > .support > .chrome_android::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); } .mdn-anno > .feature > .support > .firefox_android::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); } .mdn-anno > .feature > .support > .chrome::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); } .mdn-anno > .feature > .support > .edge_blink::before { background-image: url(https://resources.whatwg.org/browser-logos/edge.svg); } .mdn-anno > .feature > .support > .edge::before { background-image: url(https://resources.whatwg.org/browser-logos/edge_legacy.svg); } .mdn-anno > .feature > .support > .firefox::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); } .mdn-anno > .feature > .support > .ie::before { background-image: url(https://resources.whatwg.org/browser-logos/ie.png); } .mdn-anno > .feature > .support > .safari_ios::before { background-image: url(https://resources.whatwg.org/browser-logos/safari-ios.svg); } .mdn-anno > .feature > .support > .nodejs::before { background-image: url(https://nodejs.org/favicon.ico); } .mdn-anno > .feature > .support > .opera_android::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); } .mdn-anno > .feature > .support > .opera::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); } .mdn-anno > .feature > .support > .safari::before { background-image: url(https://resources.whatwg.org/browser-logos/safari.png); } .mdn-anno > .feature > .support > .samsunginternet_android::before { background-image: url(https://resources.whatwg.org/browser-logos/samsung.svg); } .mdn-anno > .feature > .support > .webview_android::before { background-image: url(https://resources.whatwg.org/browser-logos/android-webview.png); } .name-slug-mismatch { color: red; } .caniuse-status:hover { z-index: 9; } /* dt, li, .issue, .note, and .example are "position: relative", so to put annotation at right margin, must move to right of containing block */; .h-entry:not(.status-LS) dt > .mdn-anno, .h-entry:not(.status-LS) li > .mdn-anno, .h-entry:not(.status-LS) .issue > .mdn-anno, .h-entry:not(.status-LS) .note > .mdn-anno, .h-entry:not(.status-LS) .example > .mdn-anno { right: -6.7em; } .h-entry p + .mdn-anno { margin-top: 0; } h2 + .mdn-anno.after { margin: -48px 0 0 0; } h3 + .mdn-anno.after { margin: -46px 0 0 0; } h4 + .mdn-anno.after { margin: -42px 0 0 0; } h5 + .mdn-anno.after { margin: -40px 0 0 0; } h6 + .mdn-anno.after { margin: -40px 0 0 0; } </style> <style>/* Boilerplate: style-ref-hints */ :root { --ref-hint-bg: #ddd; --ref-hint-text: var(--text); } @media (prefers-color-scheme: dark) { :root { --ref-hint-bg: #222; --ref-hint-text: var(--text); } } .ref-hint { display: inline-block; position: absolute; z-index: 35; width: 20em; width: 300px; height: auto; max-height: 500px; overflow: auto; padding: 0.5em 0.5em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: var(--ref-hint-bg); color: var(--ref-hint-text); border: outset 0.2em; white-space: normal; /* in case it's moved into a pre */ } .ref-hint * { margin: 0; padding: 0; text-indent: 0; } .ref-hint ul { padding: 0 0 0 1em; list-style: none; } </style> <style>/* Boilerplate: 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%; } .example > a.self-link, .note > a.self-link, .issue > a.self-link { /* These blocks are overflow:auto, so positioning outside doesn't work. */ left: auto; right: 0; } 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>/* Boilerplate: 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 */ @media (prefers-color-scheme: dark) { .highlight:not(.idl) { background: rgba(255, 255, 255, .05); } c-[a] { color: #d33682 } /* Keyword.Declaration */ c-[b] { color: #d33682 } /* Keyword.Type */ c-[c] { color: #2aa198 } /* Comment */ c-[d] { color: #2aa198 } /* Comment.Multiline */ c-[e] { color: #268bd2 } /* Name.Attribute */ c-[f] { color: #b58900 } /* Name.Tag */ c-[g] { color: #cb4b16 } /* Name.Variable */ c-[k] { color: #d33682 } /* Keyword */ c-[l] { color: #657b83 } /* Literal */ c-[m] { color: #657b83 } /* Literal.Number */ c-[n] { color: #268bd2 } /* Name */ c-[o] { color: #657b83 } /* Operator */ c-[p] { color: #657b83 } /* Punctuation */ c-[s] { color: #6c71c4 } /* Literal.String */ c-[t] { color: #6c71c4 } /* Literal.String.Single */ c-[u] { color: #6c71c4 } /* Literal.String.Double */ c-[ch] { color: #2aa198 } /* Comment.Hashbang */ c-[cp] { color: #2aa198 } /* Comment.Preproc */ c-[cpf] { color: #2aa198 } /* Comment.PreprocFile */ c-[c1] { color: #2aa198 } /* Comment.Single */ c-[cs] { color: #2aa198 } /* Comment.Special */ c-[kc] { color: #d33682 } /* Keyword.Constant */ c-[kn] { color: #d33682 } /* Keyword.Namespace */ c-[kp] { color: #d33682 } /* Keyword.Pseudo */ c-[kr] { color: #d33682 } /* Keyword.Reserved */ c-[ld] { color: #657b83 } /* Literal.Date */ c-[nc] { color: #268bd2 } /* Name.Class */ c-[no] { color: #268bd2 } /* Name.Constant */ c-[nd] { color: #268bd2 } /* Name.Decorator */ c-[ni] { color: #268bd2 } /* Name.Entity */ c-[ne] { color: #268bd2 } /* Name.Exception */ c-[nf] { color: #268bd2 } /* Name.Function */ c-[nl] { color: #268bd2 } /* Name.Label */ c-[nn] { color: #268bd2 } /* Name.Namespace */ c-[py] { color: #268bd2 } /* Name.Property */ c-[ow] { color: #657b83 } /* Operator.Word */ c-[mb] { color: #657b83 } /* Literal.Number.Bin */ c-[mf] { color: #657b83 } /* Literal.Number.Float */ c-[mh] { color: #657b83 } /* Literal.Number.Hex */ c-[mi] { color: #657b83 } /* Literal.Number.Integer */ c-[mo] { color: #657b83 } /* Literal.Number.Oct */ c-[sa] { color: #6c71c4 } /* Literal.String.Affix */ c-[sb] { color: #6c71c4 } /* Literal.String.Backtick */ c-[sc] { color: #6c71c4 } /* Literal.String.Char */ c-[dl] { color: #6c71c4 } /* Literal.String.Delimiter */ c-[sd] { color: #6c71c4 } /* Literal.String.Doc */ c-[se] { color: #6c71c4 } /* Literal.String.Escape */ c-[sh] { color: #6c71c4 } /* Literal.String.Heredoc */ c-[si] { color: #6c71c4 } /* Literal.String.Interpol */ c-[sx] { color: #6c71c4 } /* Literal.String.Other */ c-[sr] { color: #6c71c4 } /* Literal.String.Regex */ c-[ss] { color: #6c71c4 } /* Literal.String.Symbol */ c-[fm] { color: #268bd2 } /* Name.Function.Magic */ c-[vc] { color: #cb4b16 } /* Name.Variable.Class */ c-[vg] { color: #cb4b16 } /* Name.Variable.Global */ c-[vi] { color: #cb4b16 } /* Name.Variable.Instance */ c-[vm] { color: #cb4b16 } /* Name.Variable.Magic */ c-[il] { color: #657b83 } /* Literal.Number.Integer.Long */ } </style> <style>/* Boilerplate: style-var-click-highlighting */ /* Colors were chosen in Lab using https://nixsensor.com/free-color-converter/ D50 2deg illuminant, L in [0,100], a and b in [-128, 128] 0 = lab(85,0,85) 1 = lab(85,80,30) 2 = lab(85,-40,40) 3 = lab(85,-50,0) 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) For darkmode: 0 = oklab(50% 0% 108%) 1 = oklab(50% -51% 51%) 2 = oklab(50% -64% -20%) 3 = oklab(50% 6% 19%) 4 = oklab(50% -12% -64%) 5 = oklab(50% 44% -19%) 6 = oklab(50% 102% 38%) */ [data-algorithm] var { cursor: pointer; } var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } var[data-var-color] { --var-bg: #F4D200; } var[data-var-color="1"] { --var-bg: #FF87A2; } var[data-var-color="2"] { --var-bg: #96E885; } var[data-var-color="3"] { --var-bg: #3EEED2; } var[data-var-color="4"] { --var-bg: #EACFB6; } var[data-var-color="5"] { --var-bg: #82DDFF; } var[data-var-color="6"] { --var-vg: #FFBCF2; } @media (prefers-color-scheme: dark) { var[data-var-color] { --var-bg: #bc1a00; } var[data-var-color="1"] { --var-bg: #007f00; } var[data-var-color="2"] { --var-bg: #008698; } var[data-var-color="3"] { --var-bg: #7f5b2b; } var[data-var-color="4"] { --var-bg: #004df3; } var[data-var-color="5"] { --var-bg: #a1248a; } var[data-var-color="6"] { --var-vg: #ff0000; } } </style> <style>/* Boilerplate: style-wpt */ :root { --wpt-border: hsl(0, 0%, 60%); --wpt-bg: hsl(0, 0%, 95%); --wpt-text: var(--text); --wptheading-text: hsl(0, 0%, 30%); } @media (prefers-color-scheme: dark) { :root { --wpt-border: hsl(0, 0%, 30%); --wpt-bg: var(--borderedblock-bg); --wpt-text: var(--text); --wptheading-text: hsl(0, 0%, 60%); } } .wpt-tests-block { list-style: none; border-left: .5em solid var(--wpt-border); background: var(--wpt-bg); color: var(--wpt-text); margin: 1em auto; padding: .5em; } .wpt-tests-block summary { color: var(--wptheading-text); font-weight: normal; text-transform: uppercase; } .wpt-tests-block summary::marker{ color: var(--wpt-border); } .wpt-tests-block summary:hover::marker{ color: var(--wpt-text); } /* The only content of a wpt test block in its closed state is the <summary>, which contains the word TESTS, and that is absolutely positioned. In that closed state, wpt test blocks are styled to have a top margin whose height is exactly equal to the height of the absolutely positioned <summary>, and no other background/padding/margin/border. The wpt test block elements will therefore allow the maring of the previous/next block elements to collapse through them; if this combined margin would be larger than its own top margin, it stays as is, and therefore the pre-existing vertical rhythm of the document is undisturbed. If that combined margin would be smaller, it is grown to that size. This means that the wpt test block ensures that there's always enough vertical space to insert the summary, without adding more than is needed. */ .wpt-tests-block:not([open]){ padding: 0; border: none; background: none; font-size: 0.75em; line-height: 1; position: relative; margin: 1em 0 0; } .wpt-tests-block:not([open]) summary { position: absolute; right: 0; bottom: 0; } /* It is possible that both the last child of a block element and the block element itself would be annotated with a <wpt> block each. If the block element has a padding or a border, that's fine, but otherwise the bottom margin of the block and of its last child would collapse and both <wpt> elements would overlap, being both placed there. To avoid that, add 1px of padding to the <wpt> element annotating the last child to prevent the bottom margin of the block and of its last child from collapsing (and as much negative margin, as wel only want to prevent margin collapsing, but are not trying to actually take more space). */ .wpt-tests-block:not([open]):last-child { padding-bottom: 1px; margin-bottom: -1px; } /* Exception to the previous rule: don't do that in non-last list items, because it's not necessary, and would therefore consume more space than strictly needed. Lists must have list items as children, not <wpt> elements, so a <wpt> element cannot be a sibling of a list item, and the collision that the previous rule avoids cannot happen. */ li:not(:last-child) > .wpt-tests-block:not([open]):last-child, dd:not(:last-child) > .wpt-tests-block:not([open]):last-child { padding-bottom: 0; margin-bottom: 0; } .wpt-tests-block:not([open]):not(:hover){ opacity: 0.5; } .wpt-tests-list { list-style: none; display: grid; margin: 0; padding: 0; grid-template-columns: 1fr max-content auto auto; grid-column-gap: .5em; } .wpt-tests-block hr:last-child { display: none; } .wpt-test { display: contents; } .wpt-test > a { text-decoration: underline; border: none; } .wpt-test > .wpt-name { grid-column: 1; } .wpt-test > .wpt-results { grid-column: 2; } .wpt-test > .wpt-live { grid-column: 3; } .wpt-test > .wpt-source { grid-column: 4; } .wpt-test > .wpt-results { display: flex; gap: .1em; } .wpt-test .wpt-result { display: inline-block; height: 1em; width: 1em; border-radius: 50%; position: relative; } </style> <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/2021/logos/W3C" width="72"> </a> <h1 class="p-name no-ref" id="title">CSS Lists and Counters Module Level 3</h1> <a href="https://www.w3.org/standards/types/#ED">Editor’s Draft</a>, <time class="dt-updated" datetime="2024-01-24">24 January 2024</time> <details open> <summary>More details about this document</summary> <div data-fill-with="spec-metadata"> <dl> <dt>This version: <dd><a class="u-url" href="https://drafts.csswg.org/css-lists-3/">https://drafts.csswg.org/css-lists-3/</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>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>Feedback: <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> (Apple) <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/main/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> </details> <div data-fill-with="warning"></div> <a href="https://www.w3.org/policies/#copyright">Copyright</a> © 2024 <a href="https://www.w3.org/">World Wide Web Consortium</a>. <abbr title="World Wide Web Consortium">W3C</abbr>® <a href="https://www.w3.org/policies/#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/policies/#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/copyright/software-license/" rel="license" title="W3C Software and Document 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. <script> const githubPrefix = "https://w3c.github.io/csswg-drafts/"; if(location.href.slice(0, githubPrefix.length) == githubPrefix) { const suffix = location.href.slice(githubPrefix.length); const draftUrl = "https://drafts.csswg.org/" + suffix; window.location.replace(draftUrl); } </script> </div> <h2 class="no-num no-toc no-ref heading settled" id="sotd">Status of this document</h2> <div data-fill-with="status"> This is a public copy of the editors’ draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don’t cite this document other than as work in progress. 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/www-style/">archived</a>) public mailing list <a href="mailto:www-style@w3.org?Subject=%5Bcss-lists%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a>. This document is governed by the <a href="https://www.w3.org/policies/process/20231103/" id="w3c_process_revision">03 November 2023 W3C Process Document</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="#privacy"> Privacy Considerations</a> <li><a href="#security"> Security Considerations</a> <li> <a href="#w3c-conformance"> Conformance</a> <ol class="toc"> <li><a href="#w3c-conventions"> Document conventions</a> <li><a href="#w3c-conformance-classes"> Conformance classes</a> <li> <a href="#w3c-partial"> Partial implementations</a> <ol class="toc"> <li><a href="#w3c-conform-future-proofing"> Implementations of Unstable and Proprietary Features</a> </ol> <li><a href="#w3c-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://drafts.csswg.org/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://drafts.csswg.org/css-display-4/#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" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[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" title="CSS Values and Units Module Level 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://drafts.csswg.org/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 css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-display" id="ref-for-propdef-display">display</a> property set to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-4/#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://drafts.csswg.org/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://drafts.csswg.org/css-display-4/#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 css" data-link-type="property" href="#propdef-list-style-type" id="ref-for-propdef-list-style-type">list-style-type</a> and <a class="property css" data-link-type="property" 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://drafts.csswg.org/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://drafts.csswg.org/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://drafts.csswg.org/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://drafts.csswg.org/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- g>-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://drafts.csswg.org/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://drafts.csswg.org/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker⑥">::marker</a> pseudo-element’s <a class="property css" data-link-type="property" href="https://drafts.csswg.org/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://drafts.csswg.org/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://drafts.csswg.org/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://drafts.csswg.org/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://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value">computed value</a> which will then inherit to its text content. <div class="example" id="example-e21ee84f"> <a class="self-link" href="#example-e21ee84f"></a> Inheritable properties that apply to text can be set on the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/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. Some examples of such properties include: <ul> <li><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-text-4/#propdef-text-transform" id="ref-for-propdef-text-transform">text-transform</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-text-4/#propdef-letter-spacing" id="ref-for-propdef-letter-spacing">letter-spacing</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-text-4/#propdef-word-spacing" id="ref-for-propdef-word-spacing">word-spacing</a> (see <a data-link-type="biblio" href="#biblio-css-text-3" title="CSS Text Module Level 3">[CSS-TEXT-3]</a>) <li>all the font properties (see <a data-link-type="biblio" href="#biblio-css-fonts-3" title="CSS Fonts Module Level 3">[CSS-FONTS-3]</a> and its successors) <li>the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-color-4/#propdef-color" id="ref-for-propdef-color">color</a> property (see <a data-link-type="biblio" href="#biblio-css-color-3" title="CSS Color Module Level 3">[CSS-COLOR-3]</a>) </ul> </div> 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 css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-text-combine-upright" id="ref-for-propdef-text-combine-upright">text-combine-upright</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi">unicode-bidi</a>, and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/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" title="CSS Writing Modes Level 3">[CSS-WRITING-MODES-3]</a>) <li>the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/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" title="CSS Animations Level 1">[CSS-ANIMATIONS-1]</a> and <a data-link-type="biblio" href="#biblio-css-transitions-1" title="CSS Transitions">[CSS-TRANSITIONS-1]</a>) </ul> Other properties should not have an effect on the <a data-link-type="dfn" href="#marker" id="ref-for-marker⑥">marker box</a> when declared directly on <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker①⓪">::marker</a> in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#cascade-origin-author" id="ref-for-cascade-origin-author">author</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#cascade-origin-user" id="ref-for-cascade-origin-user">user origin</a> of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-6/#cascade" id="ref-for-cascade">cascade</a>. UAs may either treat such properties as not applying, or enforce their value or inheritance from the <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#originating-element" id="ref-for-originating-element">originating element</a> by setting a <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#cascade-origin-ua" id="ref-for-cascade-origin-ua">user-agent origin</a> !important rule. NOTE: It is expected that future specifications will extend this list of properties and relax the restriction on which properties can take effect. However at the moment outside marker box layout is not fully defined, so to avoid future compatibility problems only these properties are allowed. Additionally, 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> <a class="self-link" href="#issue-04da870c"></a> <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-4/#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">text-space-collapse: preserve-spaces</a> + text-space-trim: discard-after 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>. Note: Although the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/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://drafts.csswg.org/css-pseudo-4/#selectordef-before" id="ref-for-selectordef-before①">::before</a> or <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-after" id="ref-for-selectordef-after">::after</a> pseudo-element, the <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#compound" id="ref-for-compound">compound selector</a> ::marker, which expands to *::marker <a data-link-type="biblio" href="#biblio-selectors-4" title="Selectors Level 4">[SELECTORS-4]</a>, will not select these markers—an <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#originating-element" id="ref-for-originating-element①">originating element</a> that is a <a data-link-type="dfn" href="https://drafts.csswg.org/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://drafts.csswg.org/selectors-4/#selector" id="ref-for-selector">selector</a>, e.g. ::before::marker. <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 css" data-link-type="property" href="https://drafts.csswg.org/css-content-3/#propdef-content" id="ref-for-propdef-content②">content</a> on the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker①③">::marker</a> itself is not <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/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 css" data-link-type="property" href="https://drafts.csswg.org/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://drafts.csswg.org/css-pseudo-4/#selectordef-before" id="ref-for-selectordef-before②">::before</a>. <dt><a class="property css" data-link-type="property" 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://drafts.csswg.org/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://drafts.csswg.org/css-display-4/#anonymous" id="ref-for-anonymous">anonymous</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#inline" id="ref-for-inline">inline</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#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://drafts.csswg.org/css-display-4/#css-text-sequence" id="ref-for-css-text-sequence">text sequence</a> consisting of a single space (U+0020 SPACE). <dt><a class="property css" data-link-type="property" 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://drafts.csswg.org/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://drafts.csswg.org/css-display-4/#css-text-sequence" id="ref-for-css-text-sequence①">text sequence</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://drafts.csswg.org/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://drafts.csswg.org/css-text-4/#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 css" data-link-type="property" 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://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image"><image></a> <a data-link-type="grammar" href="https://drafts.csswg.org/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><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <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://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image①"><image></a> <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <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 css" data-link-type="property" href="https://drafts.csswg.org/css-content-3/#propdef-content" id="ref-for-propdef-content④">content</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-content-3/#valdef-content-normal" id="ref-for-valdef-content-normal①">normal</a>. The values are as follows: <dl> <dt><dfn class="dfn-paneled 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://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image②"><image></a></dfn> <dd> If the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image③"><image></a> represents a <a data-link-type="dfn" href="https://drafts.csswg.org/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> The <a data-link-type="dfn" href="#marker-image" id="ref-for-marker-image⑤">marker image</a> is sized using the <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-3/#default-sizing-algorithm" id="ref-for-default-sizing-algorithm">default sizing algorithm</a> <a data-link-type="biblio" href="#biblio-css-images-3" title="CSS Images Module Level 3">[css-images-3]</a> with no <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-3/#specified-size" id="ref-for-specified-size">specified size</a> and a <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-3/#default-object-size" id="ref-for-default-object-size">default object size</a> of 1em square. <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 css" data-link-type="property" 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://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style"><counter-style></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#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><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <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><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <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 css" data-link-type="property" href="https://drafts.csswg.org/css-content-3/#propdef-content" id="ref-for-propdef-content⑤">content</a> value is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/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="dfn-paneled 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://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style①"><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://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style②"><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://drafts.csswg.org/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://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style③"><counter-style></a>, prefixed by the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-counter-styles-3/#descdef-counter-style-prefix" id="ref-for-descdef-counter-style-prefix">prefix</a> of the <counter-style>, and followed by the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-counter-styles-3/#descdef-counter-style-suffix" id="ref-for-descdef-counter-style-suffix">suffix</a> of the <counter-style>. If the specified <counter-style> does not exist, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-counter-styles-3/#decimal" id="ref-for-decimal">decimal</a> is assumed. <dt><dfn class="dfn-paneled 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://drafts.csswg.org/css-values-4/#string-value" id="ref-for-string-value①"><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://drafts.csswg.org/css-values-4/#string-value" id="ref-for-string-value②"><string></a>. <dt><dfn class="dfn-paneled css" data-dfn-for="list-style-type" data-dfn-type="value" data-export id="valdef-list-style-type-none">none</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 css" data-link-type="property" 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://drafts.csswg.org/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><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <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><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <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://drafts.csswg.org/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://drafts.csswg.org/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://drafts.csswg.org/css-display-4/#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://drafts.csswg.org/css-display-4/#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://drafts.csswg.org/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://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode">writing mode</a> of the box indicated by <a class="property css" data-link-type="property" 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 css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow">overflow</a> is other than <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/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://drafts.csswg.org/css-display-4/#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 css" data-link-type="property" 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 css" data-link-type="property" href="#propdef-list-style-position" id="ref-for-propdef-list-style-position①"><'list-style-position'></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any">||</a> <a class="production css" data-link-type="property" href="#propdef-list-style-image" id="ref-for-propdef-list-style-image③"><'list-style-image'></a> || <a class="production css" data-link-type="property" 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><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <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><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar </table> The <a class="property css" data-link-type="property" 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 css" data-link-type="property" href="#propdef-list-style-type" id="ref-for-propdef-list-style-type④">list-style-type</a>, <a class="property css" data-link-type="property" href="#propdef-list-style-image" id="ref-for-propdef-list-style-image④">list-style-image</a>, and <a class="property css" data-link-type="property" 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 css" data-link-type="property" href="#propdef-list-style-image" id="ref-for-propdef-list-style-image⑤">list-style-image</a> and <a class="property css" data-link-type="property" 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://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style⑦"><counter-style></a> values of <a class="property css" data-link-type="property" 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://drafts.csswg.org/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" title="CSS Values and Units Module Level 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 css" data-link-type="property" href="#propdef-list-style" id="ref-for-propdef-list-style②">list-style</a> information directly on list item elements (e.g., <code><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><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><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 css" data-link-type="property" 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 css" data-link-type="property" 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://drafts.csswg.org/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><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <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><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <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 css" data-link-type="property" 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://drafts.csswg.org/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://drafts.csswg.org/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker①⑦">::marker</a>’s <a data-link-type="dfn" href="https://drafts.csswg.org/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://drafts.csswg.org/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker①⑧">::marker</a>’s <a data-link-type="dfn" href="https://drafts.csswg.org/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://drafts.csswg.org/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 css" data-link-type="property" 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 css" data-link-type="property" href="https://drafts.csswg.org/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">[Issue #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, a boolean <dfn class="dfn-paneled" data-dfn-for="CSS counter" data-dfn-type="dfn" data-export id="css-counter-reversed">reversed</dfn> (false by default), and an integer <dfn class="dfn-paneled" data-dfn-for="CSS counter" data-dfn-type="dfn" data-export id="css-counter-value">value</dfn> (optional when the counter is <a data-link-type="dfn" href="#css-counter-reversed" id="ref-for-css-counter-reversed">reversed</a>). They are created and manipulated with the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="counter-properties">counter properties</dfn> <a class="property css" data-link-type="property" href="#propdef-counter-increment" id="ref-for-propdef-counter-increment">counter-increment</a>, <a class="property css" data-link-type="property" href="#propdef-counter-set" id="ref-for-propdef-counter-set">counter-set</a> and <a class="property css" data-link-type="property" 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://drafts.csswg.org/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://drafts.csswg.org/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://drafts.csswg.org/css-syntax-3/#css-invalid" id="ref-for-css-invalid">invalid</a> as a <counter-name>. A <a data-link-type="dfn" href="#css-counter-reversed" id="ref-for-css-counter-reversed①">reversed</a> counter is created with the reversed() <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#functional-notation" id="ref-for-functional-notation①">functional notation</a>, which is defined as follows: <pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-reversed-counter-name"><a class="production" data-link-type="type" href="#typedef-reversed-counter-name" id="ref-for-typedef-reversed-counter-name"><reversed-counter-name></a></dfn> = reversed( <a class="production" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name③"><counter-name></a> ) </pre> 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 css" data-link-type="property" href="#propdef-counter-reset" id="ref-for-propdef-counter-reset①">counter-reset</a>). <li data-md> Counter values are incremented (<a class="property css" data-link-type="property" href="#propdef-counter-increment" id="ref-for-propdef-counter-increment①">counter-increment</a>). <li data-md> Counter values are explicitly set (<a class="property css" data-link-type="property" 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 css" data-link-type="property" 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://drafts.csswg.org/css-values-4/#integer-value" id="ref-for-integer-value"><integer></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤">|</a> <a class="production css" data-link-type="type" href="#typedef-reversed-counter-name" id="ref-for-typedef-reversed-counter-name①"><reversed-counter-name></a> <integer>? ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-one-plus" id="ref-for-mult-one-plus">+</a> | none <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>none <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <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 or a reversed() function paired with an integer <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <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 css" data-link-type="property" 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="dfn-paneled 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://drafts.csswg.org/css-values-4/#integer-value" id="ref-for-integer-value②"><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://drafts.csswg.org/css-values-4/#integer-value" id="ref-for-integer-value③"><integer></a>, defaulting to 0. <dt><dfn class="dfn-paneled css" data-dfn-for="counter-reset" data-dfn-type="value" data-export id="valdef-counter-reset-reversed-counter-name-integer"><a class="production css" data-link-type="type" href="#typedef-reversed-counter-name" id="ref-for-typedef-reversed-counter-name②"><reversed-counter-name></a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#integer-value" id="ref-for-integer-value④"><integer></a>?</dfn> <dd> <a data-link-type="dfn" href="#instantiate-counter" id="ref-for-instantiate-counter③">Instantiates</a> a <a data-link-type="dfn" href="#css-counter-reversed" id="ref-for-css-counter-reversed②">reversed</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://drafts.csswg.org/css-values-4/#integer-value" id="ref-for-integer-value⑤"><integer></a>, or no starting value if not given. </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://drafts.csswg.org/css-cascade-6/#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 css" data-link-type="property" href="#propdef-counter-set" id="ref-for-propdef-counter-set②">counter-set</a> and <a class="property css" data-link-type="property" 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" title="CSS Cascading and Inheritance Level 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 css" data-link-type="property" href="#propdef-counter-increment" id="ref-for-propdef-counter-increment③">counter-increment</a> and <a class="property css" data-link-type="property" 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://drafts.csswg.org/css-values-4/#integer-value" id="ref-for-integer-value⑥"><integer></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt②">?</a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-one-plus" id="ref-for-mult-one-plus①">+</a> <a data-link-type="grammar" href="https://drafts.csswg.org/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><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <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><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <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://drafts.csswg.org/css-values-4/#integer-value" id="ref-for-integer-value⑦"><integer></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt③">?</a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-one-plus" id="ref-for-mult-one-plus②">+</a> <a data-link-type="grammar" href="https://drafts.csswg.org/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><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <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><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <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 css" data-link-type="property" href="#propdef-counter-increment" id="ref-for-propdef-counter-increment④">counter-increment</a> and <a class="property css" data-link-type="property" 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="dfn-paneled css" data-dfn-for="counter-set,counter-increment" data-dfn-type="value" data-export id="valdef-counter-set-none">none</dfn> <dd> This element does not alter the value of any counters. <dt><dfn class="dfn-paneled css" data-dfn-for="counter-set,counter-increment" data-dfn-type="value" data-export id="valdef-counter-set-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://drafts.csswg.org/css-values-4/#integer-value" id="ref-for-integer-value⑧"><integer></a>?</dfn> <dd> Sets (for <a class="property css" data-link-type="property" href="#propdef-counter-set" id="ref-for-propdef-counter-set⑤">counter-set</a>) or increments (for <a class="property css" data-link-type="property" 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://drafts.csswg.org/css-values-4/#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 css" data-link-type="property" 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">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>), a boolean (representing whether the counter is <a data-link-type="dfn" href="#css-counter-reversed" id="ref-for-css-counter-reversed③">reversed</a>), and optionally an integer (representing the counter’s value). 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">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">name</a> and <a data-link-type="dfn" href="#css-counter-creator" id="ref-for-css-counter-creator①">creator</a>, then set the value 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://drafts.csswg.org/css-cascade-5/#css-inheritance" id="ref-for-css-inheritance">inheritance</a>, operates on the “flattened element tree” in the context of the <a data-link-type="biblio" href="#biblio-dom" title="DOM Standard">[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 css" data-link-type="property" 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 css" data-link-type="property" href="#propdef-counter-increment" id="ref-for-propdef-counter-increment⑦">counter-increment</a>, <a class="property css" data-link-type="property" 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>, optionally <var>reversed</var>, with an optional 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>, reversed being <var>reversed</var>, and initial value <var>value</var> (if given) </ol> </div> When a <a data-link-type="dfn" href="#counter" id="ref-for-counter①⑦">counter</a> is <a data-link-type="dfn" href="#instantiate-counter" id="ref-for-instantiate-counter①⓪">instantiated</a> without an initial value, the user agent must dynamically calculate the initial value at layout-time to be the value returned by the following algorithm: <ol> <li data-md> Let <var>num</var> be 0. <li data-md> Let <var>first</var> be true. <li data-md> For each element or pseudo-element <var>el</var> that increments or sets the same counter in the same <a data-link-type="dfn" href="#counter-scope" id="ref-for-counter-scope①">scope</a>: <ol> <li data-md> Let <var>incrementNegated</var> be <var>el</var>’s <a class="property css" data-link-type="property" href="#propdef-counter-increment" id="ref-for-propdef-counter-increment⑧">counter-increment</a> integer value for this counter, multiplied by -1. <li data-md> If <var>first</var> is true, then add <var>incrementNegated</var> to <var>num</var> and set <var>first</var> to false. <li data-md> If <var>el</var> sets this counter with <a class="property css" data-link-type="property" href="#propdef-counter-set" id="ref-for-propdef-counter-set⑧">counter-set</a>, then add that integer value to <var>num</var> and break this loop. <li data-md> Add <var>incrementNegated</var> to <var>num</var>. </ol> <li data-md> Return <var>num</var>. </ol> Note: Only <a data-link-type="dfn" href="#css-counter-reversed" id="ref-for-css-counter-reversed④">reversed</a> counters can be instantiated without an initial value. <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 css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-display" id="ref-for-propdef-display①">display</a> set to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-4/#valdef-display-none" id="ref-for-valdef-display-none">none</a>, or a pseudo-element with <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-content-3/#propdef-content" id="ref-for-propdef-content⑥">content</a> set to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/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 css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-visibility" id="ref-for-propdef-visibility">visibility</a> to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-4/#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://drafts.csswg.org/css-display-4/#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://svgwg.org/svg2-draft/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://drafts.csswg.org/css-display-4/#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 css" data-link-type="property" href="#propdef-list-style-type" id="ref-for-propdef-list-style-type⑦">list-style-type</a>). Specifically, unless the <a class="property css" data-link-type="property" 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>, or if the counter is <a data-link-type="dfn" href="#css-counter-reversed" id="ref-for-css-counter-reversed⑤">reversed</a>, it must be incremented by -1 on every list item instead, 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 or 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://drafts.csswg.org/css-cascade-5/#specified-value" id="ref-for-specified-value">specified</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value①">computed values</a> of counter-increment. <div class="example" id="example-03e5f198"> <a class="self-link" href="#example-03e5f198"></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 css" data-link-type="property" 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 css" data-link-type="property" 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="#valdef-counter-set-none" id="ref-for-valdef-counter-set-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 css" data-link-type="property" 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 css" data-link-type="property" href="https://drafts.csswg.org/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 <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-counter">counter()</dfn> and <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-counters">counters()</dfn> functions, whose <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#used-value" id="ref-for-used-value">used values</a> represent counter values as strings or images. They are defined as follows: <pre class="prod"><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 data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑨">|</a> <a class="production" data-link-type="function" href="#funcdef-counters" id="ref-for-funcdef-counters⑤"><counters()></a> <a class="production" data-link-type="function" href="#funcdef-counter" id="ref-for-funcdef-counter⑥"><counter()></a> = counter( <a class="production" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name①③"><counter-name></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-comma" id="ref-for-comb-comma">,</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style⑧"><counter-style></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt④">?</a> ) <a class="production" data-link-type="function" href="#funcdef-counters" id="ref-for-funcdef-counters⑥"><counters()></a> = counters( <a class="production" data-link-type="type" href="#typedef-counter-name" id="ref-for-typedef-counter-name①④"><counter-name></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-comma" id="ref-for-comb-comma①">,</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#string-value" id="ref-for-string-value③"><string></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-comma" id="ref-for-comb-comma②">,</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style⑨"><counter-style></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑤">?</a> ) </pre> where <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style①⓪"><counter-style></a> specifies the <a data-link-type="dfn" href="https://drafts.csswg.org/css-counter-styles-3/#counter-style" id="ref-for-counter-style">counter style</a> for <a data-link-type="dfn" href="https://drafts.csswg.org/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" title="CSS Counter Styles Level 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://drafts.csswg.org/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://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style①①"><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://drafts.csswg.org/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://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style①②"><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://drafts.csswg.org/css-values-4/#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://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style①③"><counter-style></a> argument is omitted it defaults to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-counter-styles-3/#decimal" id="ref-for-decimal①">decimal</a>. Note: If the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style①④"><counter-style></a> is one of the predefined symbolic styles, like <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-counter-styles-3/#disc" id="ref-for-disc">disc</a>, it might look different than when used in <a class="property css" data-link-type="property" href="#propdef-list-style-type" id="ref-for-propdef-list-style-type⑨">list-style-type</a>. See <a href="https://drafts.csswg.org/css-counter-styles-3/#simple-symbolic"><cite>CSS Counter Styles 3</cite> § 6.3 Symbolic: disc, circle, square, disclosure-open, disclosure-closed</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 css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#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://drafts.csswg.org/css-variables-2/#custom-property" id="ref-for-custom-property">custom properties</a> and stacking up nested <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/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" title="HTML Standard">[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. <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); } /* Handling reversed lists */ ol[reversed] { counter-reset: reversed(list-item); } ol[reversed][start] { counter-reset: reversed(list-item) calc(attr(start 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://drafts.csswg.org/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://drafts.csswg.org/css-text-4/#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://drafts.csswg.org/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://drafts.csswg.org/css-display-4/#block-container" id="ref-for-block-container②">block containers</a>. (Their <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#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://drafts.csswg.org/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker②③">::marker</a> from <a data-link-type="biblio" href="#biblio-css-pseudo-4" title="CSS Pseudo-Elements Module Level 4">[CSS-PSEUDO-4]</a> and added animations, transitions, and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-text-4/#propdef-white-space" id="ref-for-propdef-white-space①">white-space</a>. <li>Added <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-4/#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://drafts.csswg.org/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://drafts.csswg.org/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://drafts.csswg.org/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 css" data-link-type="property" 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 css" data-link-type="property" href="#propdef-counter-set" id="ref-for-propdef-counter-set⑨">counter-set</a> is applied after <a class="property css" data-link-type="property" 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 css" data-link-type="property" href="#propdef-list-style" id="ref-for-propdef-list-style⑤">list-style</a> serialization to put <a class="production css" data-link-type="property" 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://drafts.csswg.org/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 css" data-link-type="property" 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://drafts.csswg.org/css-values-4/#string-value" id="ref-for-string-value⑤"><string></a> as well as the extended <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style" id="ref-for-typedef-counter-style①⑤"><counter-style></a> values from <a data-link-type="biblio" href="#biblio-css-counter-styles-3" title="CSS Counter Styles Level 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 css" data-link-type="property" 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://drafts.csswg.org/css-display-4/#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" title="CSS Display Module Level 3">[CSS-DISPLAY-3]</a>. </ol> <h2 class="no-num heading settled" id="privacy">Privacy Considerations<a class="self-link" href="#privacy"></a></h2> No new privacy considerations have been reported on this specification. <h2 class="no-num heading settled" id="security">Security Considerations<a class="self-link" href="#security"></a></h2> No new security considerations have been reported on this specification. </main> <h2 class="no-ref no-num heading settled" id="w3c-conformance"> Conformance<a class="self-link" href="#w3c-conformance"></a></h2> <h3 class="no-ref heading settled" id="w3c-conventions"> Document conventions<a class="self-link" href="#w3c-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" title="Key words for use in RFCs to Indicate Requirement Levels">[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="w3c-example"> <a class="self-link" href="#w3c-example"></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. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> Tests relating to the content of this specification may be documented in “Tests” blocks like this one. Any such block is non-normative. <ul class="wpt-tests-list"></ul> <hr> </details> <h3 class="no-ref heading settled" id="w3c-conformance-classes"> Conformance classes<a class="self-link" href="#w3c-conformance-classes"></a></h3> Conformance to this specification is defined for three conformance classes: <dl> <dt>style sheet <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS style sheet</a>. <dt>renderer <dd>A <a href="http://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="http://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="w3c-partial"> Partial implementations<a class="self-link" href="#w3c-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="http://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="w3c-conform-future-proofing"> Implementations of Unstable and Proprietary Features<a class="self-link" href="#w3c-conform-future-proofing"></a></h4> To avoid clashes with future stable CSS features, the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. <h3 class="no-ref heading settled" id="w3c-testing"> Non-experimental implementations<a class="self-link" href="#w3c-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="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. <script src="https://www.w3.org/scripts/TR/2021/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-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-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="#css-counter-reversed">reversed</a>, in § 4 <li><a href="#typedef-reversed-counter-name"><reversed-counter-name></a>, in § 4 <li><a href="#valdef-counter-reset-reversed-counter-name-integer"><reversed-counter-name> <integer>?</a>, in § 4.1 <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> <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-5]</a> defines the following terms: <ul> <li>author origin <li>computed value <li>inheritance <li>specified value <li>used value <li>user origin <li>user-agent origin </ul> <li> <a data-link-type="biblio">[CSS-CASCADE-6]</a> defines the following terms: <ul> <li>cascade </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>disc <li>generate a counter representation <li>prefix <li>suffix </ul> <li> <a data-link-type="biblio">[CSS-DISPLAY-4]</a> defines the following terms: <ul> <li>anonymous <li>block container <li>display <li>display type <li>hidden <li>inline <li>inline box <li>inline-level <li>list-item <li>none <li>order <li>outer display type <li>principal box <li>replaced element <li>text sequence <li>visibility </ul> <li> <a data-link-type="biblio">[CSS-IMAGES-3]</a> defines the following terms: <ul> <li><image> <li>default object size <li>default sizing algorithm <li>specified size </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-4]</a> defines the following terms: <ul> <li>forced line break <li>letter-spacing <li>text-transform <li>white-space <li>word-spacing </ul> <li> <a data-link-type="biblio">[CSS-VALUES-4]</a> defines the following terms: <ul> <li>+ <li>, <li><custom-ident> <li><integer> <li><string> <li>? <li>calc() <li>CSS-wide keywords <li>functional notation <li>| <li>|| </ul> <li> <a data-link-type="biblio">[CSS-VARIABLES-2]</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">[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-5">[CSS-CASCADE-5] <dd>Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-cascade-5/"><cite>CSS Cascading and Inheritance Level 5</cite></a>. URL: <a href="https://drafts.csswg.org/css-cascade-5/">https://drafts.csswg.org/css-cascade-5/</a> <dt id="biblio-css-cascade-6">[CSS-CASCADE-6] <dd>Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-cascade-6/"><cite>CSS Cascading and Inheritance Level 6</cite></a>. URL: <a href="https://drafts.csswg.org/css-cascade-6/">https://drafts.csswg.org/css-cascade-6/</a> <dt id="biblio-css-content-3">[CSS-CONTENT-3] <dd>Elika Etemad; Dave Cramer. <a href="https://drafts.csswg.org/css-content-3/"><cite>CSS Generated Content Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-content-3/">https://drafts.csswg.org/css-content-3/</a> <dt id="biblio-css-counter-styles-3">[CSS-COUNTER-STYLES-3] <dd>Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-counter-styles/"><cite>CSS Counter Styles Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-counter-styles/">https://drafts.csswg.org/css-counter-styles/</a> <dt id="biblio-css-display-4">[CSS-DISPLAY-4] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-display/"><cite>CSS Display Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-display/">https://drafts.csswg.org/css-display/</a> <dt id="biblio-css-images-3">[CSS-IMAGES-3] <dd>Tab Atkins Jr.; Elika Etemad; Lea Verou. <a href="https://drafts.csswg.org/css-images-3/"><cite>CSS Images Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-images-3/">https://drafts.csswg.org/css-images-3/</a> <dt id="biblio-css-images-4">[CSS-IMAGES-4] <dd>Tab Atkins Jr.; Elika Etemad; Lea Verou. <a href="https://drafts.csswg.org/css-images-4/"><cite>CSS Images Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-images-4/">https://drafts.csswg.org/css-images-4/</a> <dt id="biblio-css-overflow-3">[CSS-OVERFLOW-3] <dd>Elika Etemad; Florian Rivoal. <a href="https://drafts.csswg.org/css-overflow-3/"><cite>CSS Overflow Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-overflow-3/">https://drafts.csswg.org/css-overflow-3/</a> <dt id="biblio-css-position-3">[CSS-POSITION-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-position-3/"><cite>CSS Positioned Layout Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-position-3/">https://drafts.csswg.org/css-position-3/</a> <dt id="biblio-css-pseudo-4">[CSS-PSEUDO-4] <dd>Daniel Glazman; Elika Etemad; Alan Stearns. <a href="https://drafts.csswg.org/css-pseudo-4/"><cite>CSS Pseudo-Elements Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-pseudo-4/">https://drafts.csswg.org/css-pseudo-4/</a> <dt id="biblio-css-syntax-3">[CSS-SYNTAX-3] <dd>Tab Atkins Jr.; Simon Sapin. <a href="https://drafts.csswg.org/css-syntax/"><cite>CSS Syntax Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-syntax/">https://drafts.csswg.org/css-syntax/</a> <dt id="biblio-css-text-4">[CSS-TEXT-4] <dd>Elika Etemad; et al. <a href="https://drafts.csswg.org/css-text-4/"><cite>CSS Text Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-text-4/">https://drafts.csswg.org/css-text-4/</a> <dt id="biblio-css-values-3">[CSS-VALUES-3] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-values-3/"><cite>CSS Values and Units Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-values-3/">https://drafts.csswg.org/css-values-3/</a> <dt id="biblio-css-values-4">[CSS-VALUES-4] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-values-4/"><cite>CSS Values and Units Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-values-4/">https://drafts.csswg.org/css-values-4/</a> <dt id="biblio-css-variables-2">[CSS-VARIABLES-2] <dd><a href="https://drafts.csswg.org/css-variables-2/"><cite>CSS Custom Properties for Cascading Variables Module Level 2</cite></a>. Editor's Draft. URL: <a href="https://drafts.csswg.org/css-variables-2/">https://drafts.csswg.org/css-variables-2/</a> <dt id="biblio-css-writing-modes-3">[CSS-WRITING-MODES-3] <dd>Elika Etemad; Koji Ishii. <a href="https://drafts.csswg.org/css-writing-modes-3/"><cite>CSS Writing Modes Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-writing-modes-3/">https://drafts.csswg.org/css-writing-modes-3/</a> <dt id="biblio-css-writing-modes-4">[CSS-WRITING-MODES-4] <dd>Elika Etemad; Koji Ishii. <a href="https://drafts.csswg.org/css-writing-modes-4/"><cite>CSS Writing Modes Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-writing-modes-4/">https://drafts.csswg.org/css-writing-modes-4/</a> <dt id="biblio-css2">[CSS2] <dd>Bert Bos; et al. <a href="https://drafts.csswg.org/css2/"><cite>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</cite></a>. URL: <a href="https://drafts.csswg.org/css2/">https://drafts.csswg.org/css2/</a> <dt id="biblio-dom">[DOM] <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/"><cite>DOM Standard</cite></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/"><cite>HTML Standard</cite></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/"><cite>Infra Standard</cite></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://datatracker.ietf.org/doc/html/rfc2119"><cite>Key words for use in RFCs to Indicate Requirement Levels</cite></a>. March 1997. Best Current Practice. URL: <a href="https://datatracker.ietf.org/doc/html/rfc2119">https://datatracker.ietf.org/doc/html/rfc2119</a> <dt id="biblio-selectors-4">[SELECTORS-4] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/selectors/"><cite>Selectors Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/selectors/">https://drafts.csswg.org/selectors/</a> <dt id="biblio-svg2">[SVG2] <dd>Amelia Bellamy-Royds; et al. <a href="https://svgwg.org/svg2-draft/"><cite>Scalable Vector Graphics (SVG) 2</cite></a>. URL: <a href="https://svgwg.org/svg2-draft/">https://svgwg.org/svg2-draft/</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>David Baron; et al. <a href="https://drafts.csswg.org/css-animations/"><cite>CSS Animations Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-animations/">https://drafts.csswg.org/css-animations/</a> <dt id="biblio-css-cascade-4">[CSS-CASCADE-4] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-cascade-4/"><cite>CSS Cascading and Inheritance Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-cascade-4/">https://drafts.csswg.org/css-cascade-4/</a> <dt id="biblio-css-color-3">[CSS-COLOR-3] <dd>Tantek Çelik; Chris Lilley; David Baron. <a href="https://drafts.csswg.org/css-color-3/"><cite>CSS Color Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-color-3/">https://drafts.csswg.org/css-color-3/</a> <dt id="biblio-css-color-4">[CSS-COLOR-4] <dd>Chris Lilley; Tab Atkins Jr.; Lea Verou. <a href="https://drafts.csswg.org/css-color-4/"><cite>CSS Color Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-color-4/">https://drafts.csswg.org/css-color-4/</a> <dt id="biblio-css-display-3">[CSS-DISPLAY-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-display/"><cite>CSS Display Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-display/">https://drafts.csswg.org/css-display/</a> <dt id="biblio-css-fonts-3">[CSS-FONTS-3] <dd>John Daggett; Myles Maxfield; Chris Lilley. <a href="https://drafts.csswg.org/css-fonts-3/"><cite>CSS Fonts Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-fonts-3/">https://drafts.csswg.org/css-fonts-3/</a> <dt id="biblio-css-text-3">[CSS-TEXT-3] <dd>Elika Etemad; Koji Ishii; Florian Rivoal. <a href="https://drafts.csswg.org/css-text-3/"><cite>CSS Text Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-text-3/">https://drafts.csswg.org/css-text-3/</a> <dt id="biblio-css-transitions-1">[CSS-TRANSITIONS-1] <dd>David Baron; et al. <a href="https://drafts.csswg.org/css-transitions/"><cite>CSS Transitions</cite></a>. URL: <a href="https://drafts.csswg.org/css-transitions/">https://drafts.csswg.org/css-transitions/</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>? | <reversed-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 or a reversed() function 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://drafts.csswg.org/css-text-4/#propdef-white-space">white-space: pre</a> doesn’t have quite the right behavior; <a class="css" data-link-type="propdesc">text-space-collapse: preserve-spaces</a> + text-space-trim: discard-after 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 class="issue-return" href="#issue-04da870c" title="Jump to section">↵</a></div> <div class="issue"> This is handwavey nonsense from CSS2, and needs a real definition. <a class="issue-return" href="#issue-ffa70ac6" title="Jump to section">↵</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 class="issue-return" href="#issue-bf311ada" title="Jump to section">↵</a></div> <div class="issue"> For this order punctuation inside the marker correctly, it would also need to take the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction">direction</a> value of the parent. <a href="https://github.com/w3c/csswg-drafts/issues/4202">[Issue #4202]</a> <a class="issue-return" href="#issue-91830b42" title="Jump to section">↵</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 class="issue-return" href="#issue-69d20ea1" title="Jump to section">↵</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 css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#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://drafts.csswg.org/css-variables-2/#custom-property">custom properties</a> and stacking up nested <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/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 class="issue-return" href="#issue-4b0c2d48" title="Jump to section">↵</a> </div> </div> <details class="mdn-anno unpositioned" data-anno-for="increment-set"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/counter-increment" title="The counter-increment CSS property increases or decreases the value of a CSS counter by a given value.">counter-increment</a> In all current engines. <div class="support"> Firefox1+Safari3+Chrome2+ <hr> Opera9.2+Edge79+ <hr> Edge (Legacy)12+IE8+ <hr> Firefox for Android25+iOS Safari1+Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="counter-reset"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset" title="The counter-reset CSS property resets a CSS counter to a given value. This property will create a new counter or reversed counter with the given name on the specified element.">counter-reset</a> In all current engines. <div class="support"> Firefox1+Safari3+Chrome2+ <hr> Opera9.2+Edge79+ <hr> Edge (Legacy)12+IE8+ <hr> Firefox for Android25+iOS Safari1+Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="propdef-counter-set"> <summary>MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/counter-set" title="The counter-set CSS property sets a CSS counter to a given value. It manipulates the value of existing counters, and will only create new counters if there isn't already a counter of the given name on the element.">counter-set</a> <div class="support"> Firefox68+SafariNoneChrome85+ <hr> Opera?Edge85+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="image-markers"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image" title="The list-style-image CSS property sets an image to be used as the list item marker.">list-style-image</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera7+Edge79+ <hr> Edge (Legacy)12+IE4+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="list-style-position-property"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position" title="The list-style-position CSS property sets the position of the ::marker relative to a list item.">list-style-position</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera3.5+Edge79+ <hr> Edge (Legacy)12+IE4+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="text-markers"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type" title="The list-style-type CSS property sets the marker (such as a disc, character, or custom counter style) of a list item element.">list-style-type</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera3.5+Edge79+ <hr> Edge (Legacy)12+IE4+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="list-style-property"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style" title="The list-style CSS shorthand property allows you to set all the list style properties at once.">list-style</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera7+Edge79+ <hr> Edge (Legacy)12+IE4+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="counter-functions"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/counter" title="The counter() CSS function returns a string representing the current value of the named counter, if there is one. It is generally used in the content property of pseudo-elements, but can theoretically be used anywhere a <string> value is supported.">counter</a> In all current engines. <div class="support"> Firefox1+Safari3+Chrome1+ <hr> Opera9.2+Edge79+ <hr> Edge (Legacy)12+IE8+ <hr> Firefox for Android?iOS Safari1+Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/counters" title="The counters() CSS function enables nested counters, returning a concatenated string representing the current values of the named counters, if there are any. The counters() function has two forms: counters(name, string) or counters(name, string, style). It is generally used with pseudo-elements, but can be used, theoretically, anywhere a <string> value is supported. The generated text is the value of all counters with the given name, from outermost to innermost, separated by the specified string. The counters are rendered in the style indicated, defaulting to decimal if no style is specified.">counters</a> In all current engines. <div class="support"> Firefox1.5+Safari3+Chrome1+ <hr> Opera10+Edge79+ <hr> Edge (Legacy)12+IE8+ <hr> Firefox for Android?iOS Safari1+Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <script>/* Boilerplate: script-dom-helper */ "use strict"; function query(sel) { return document.querySelector(sel); } function queryAll(sel) { return [...document.querySelectorAll(sel)]; } function iter(obj) { if(!obj) return []; var it = obj[Symbol.iterator]; if(it) return it; return Object.entries(obj); } function mk(tagname, attrs, ...children) { const el = document.createElement(tagname); for(const [k,v] of iter(attrs)) { if(k.slice(0,3) == "_on") { const eventName = k.slice(3); el.addEventListener(eventName, v); } else if(k[0] == "_") { // property, not attribute el[k.slice(1)] = v; } else { if(v === false || v == null) { continue; } else if(v === true) { el.setAttribute(k, ""); continue; } else { el.setAttribute(k, v); } } } append(el, children); return el; } /* Create shortcuts for every known HTML element */ [ "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "head", "header", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "label", "legend", "li", "link", "main", "map", "mark", "meta", "meter", "nav", "nobr", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "pre", "progress", "q", "s", "samp", "script", "section", "select", "small", "source", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "u", "ul", "var", "video", "wbr", "xmp", ].forEach(tagname=>{ mk[tagname] = (...args) => mk(tagname, ...args); }); function* nodesFromChildList(children) { for(const child of children.flat(Infinity)) { if(child instanceof Node) { yield child; } else { yield new Text(child); } } } function append(el, ...children) { for(const child of nodesFromChildList(children)) { if(el instanceof Node) el.appendChild(child); else el.push(child); } return el; } function insertAfter(el, ...children) { for(const child of nodesFromChildList(children)) { el.parentNode.insertBefore(child, el.nextSibling); } return el; } function clearContents(el) { el.innerHTML = ""; return el; } function parseHTML(markup) { if(markup.toLowerCase().trim().indexOf('<!doctype') === 0) { const doc = document.implementation.createHTMLDocument(""); doc.documentElement.innerHTML = markup; return doc; } else { const el = mk.template({}); el.innerHTML = markup; return el.content; } }</script> <script>/* Boilerplate: script-dfn-panel */ "use strict"; { let dfnPanelData = { "0698d556": {"dfnID":"0698d556","dfnText":"string","external":true,"refSections":[{"refs":[{"id":"ref-for-string"}],"title":"4.4. \nCreating and Inheriting Counters"}],"url":"https://infra.spec.whatwg.org/#string"}, "083ffe5f": {"dfnID":"083ffe5f","dfnText":"inline box","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-box"}],"title":"3.5. \nPositioning Markers: The list-style-position property"}],"url":"https://drafts.csswg.org/css-display-4/#inline-box"}, "09cd65e4": {"dfnID":"09cd65e4","dfnText":"display type","external":true,"refSections":[{"refs":[{"id":"ref-for-display-type"}],"title":"1. \nIntroduction"},{"refs":[{"id":"ref-for-display-type\u2460"}],"title":"3. \nMarkers"}],"url":"https://drafts.csswg.org/css-display-4/#display-type"}, "0e8de730": {"dfnID":"0e8de730","dfnText":"tuple","external":true,"refSections":[{"refs":[{"id":"ref-for-tuple"}],"title":"4.4. \nCreating and Inheriting Counters"}],"url":"https://infra.spec.whatwg.org/#tuple"}, "12f8fb07": {"dfnID":"12f8fb07","dfnText":"visibility","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-visibility"}],"title":"4.5. \nCounters in elements that do not generate boxes"}],"url":"https://drafts.csswg.org/css-display-4/#propdef-visibility"}, "15e48c39": {"dfnID":"15e48c39","dfnText":"set","external":true,"refSections":[{"refs":[{"id":"ref-for-ordered-set"}],"title":"4.4. \nCreating and Inheriting Counters"}],"url":"https://infra.spec.whatwg.org/#ordered-set"}, "198f1537": {"dfnID":"198f1537","dfnText":"custom property","external":true,"refSections":[{"refs":[{"id":"ref-for-custom-property"}],"title":"4.7. \nOutputting Counters: the counter() and counters() functions"}],"url":"https://drafts.csswg.org/css-variables-2/#custom-property"}, "1cf918c1": {"dfnID":"1cf918c1","dfnText":"specified value","external":true,"refSections":[{"refs":[{"id":"ref-for-specified-value"}],"title":"4.6. \nThe Implicit list-item Counter"}],"url":"https://drafts.csswg.org/css-cascade-5/#specified-value"}, "20fff200": {"dfnID":"20fff200","dfnText":"inheritance","external":true,"refSections":[{"refs":[{"id":"ref-for-css-inheritance"}],"title":"4.4.1. \nInheriting Counters"}],"url":"https://drafts.csswg.org/css-cascade-5/#css-inheritance"}, "24408a11": {"dfnID":"24408a11","dfnText":"compound selector","external":true,"refSections":[{"refs":[{"id":"ref-for-compound"}],"title":"3.1.1. \nProperties Applying to ::marker"}],"url":"https://drafts.csswg.org/selectors-4/#compound"}, "2467179e": {"dfnID":"2467179e","dfnText":"content","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-content"}],"title":"3.1. \nThe ::marker Pseudo-Element"},{"refs":[{"id":"ref-for-propdef-content\u2460"}],"title":"3.1.1. \nProperties Applying to ::marker"},{"refs":[{"id":"ref-for-propdef-content\u2461"},{"id":"ref-for-propdef-content\u2462"}],"title":"3.2. \nGenerating Marker Contents"},{"refs":[{"id":"ref-for-propdef-content\u2463"}],"title":"3.3. \nImage Markers: the list-style-image property"},{"refs":[{"id":"ref-for-propdef-content\u2464"}],"title":"3.4. \nText-based Markers: the list-style-type property"},{"refs":[{"id":"ref-for-propdef-content\u2465"}],"title":"4.5. \nCounters in elements that do not generate boxes"},{"refs":[{"id":"ref-for-propdef-content\u2466"}],"title":"4.6. \nThe Implicit list-item Counter"}],"url":"https://drafts.csswg.org/css-content-3/#propdef-content"}, "25538777": {"dfnID":"25538777","dfnText":"tree order","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-tree-order"},{"id":"ref-for-concept-tree-order\u2460"},{"id":"ref-for-concept-tree-order\u2461"},{"id":"ref-for-concept-tree-order\u2462"},{"id":"ref-for-concept-tree-order\u2463"}],"title":"4.4.1. \nInheriting Counters"}],"url":"https://dom.spec.whatwg.org/#concept-tree-order"}, "2565a949": {"dfnID":"2565a949","dfnText":"generate a counter representation","external":true,"refSections":[{"refs":[{"id":"ref-for-generate-a-counter"}],"title":"3.4. \nText-based Markers: the list-style-type property"},{"refs":[{"id":"ref-for-generate-a-counter\u2460"}],"title":"4.7. \nOutputting Counters: the counter() and counters() functions"}],"url":"https://drafts.csswg.org/css-counter-styles-3/#generate-a-counter"}, "27722a1d": {"dfnID":"27722a1d","dfnText":"valid image","external":true,"refSections":[{"refs":[{"id":"ref-for-invalid-image"}],"title":"3.3. \nImage Markers: the list-style-image property"}],"url":"https://drafts.csswg.org/css-images-4/#invalid-image"}, "2bceefb2": {"dfnID":"2bceefb2","dfnText":"default object size","external":true,"refSections":[{"refs":[{"id":"ref-for-default-object-size"}],"title":"3.3. \nImage Markers: the list-style-image property"}],"url":"https://drafts.csswg.org/css-images-3/#default-object-size"}, "2c3a36fb": {"dfnID":"2c3a36fb","dfnText":"visible","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-overflow-visible"}],"title":"3.5. \nPositioning Markers: The list-style-position property"}],"url":"https://drafts.csswg.org/css-overflow-3/#valdef-overflow-visible"}, "30868380": {"dfnID":"30868380","dfnText":"specified size","external":true,"refSections":[{"refs":[{"id":"ref-for-specified-size"}],"title":"3.3. \nImage Markers: the list-style-image property"}],"url":"https://drafts.csswg.org/css-images-3/#specified-size"}, "33cbcfca": {"dfnID":"33cbcfca","dfnText":"selector","external":true,"refSections":[{"refs":[{"id":"ref-for-selector"}],"title":"3.1.1. \nProperties Applying to ::marker"}],"url":"https://drafts.csswg.org/selectors-4/#selector"}, "358fd6ff": {"dfnID":"358fd6ff","dfnText":"CSS-wide keywords","external":true,"refSections":[{"refs":[{"id":"ref-for-css-wide-keywords"}],"title":"1.1. \nValue Definitions"}],"url":"https://drafts.csswg.org/css-values-4/#css-wide-keywords"}, "39e92270": {"dfnID":"39e92270","dfnText":"author origin","external":true,"refSections":[{"refs":[{"id":"ref-for-cascade-origin-author"}],"title":"3.1.1. \nProperties Applying to ::marker"}],"url":"https://drafts.csswg.org/css-cascade-5/#cascade-origin-author"}, "3bb3a53a": {"dfnID":"3bb3a53a","dfnText":"invalid","external":true,"refSections":[{"refs":[{"id":"ref-for-css-invalid"}],"title":"4. \nAutomatic Numbering With Counters"}],"url":"https://drafts.csswg.org/css-syntax-3/#css-invalid"}, "45209803": {"dfnID":"45209803","dfnText":"for each","external":true,"refSections":[{"refs":[{"id":"ref-for-map-iterate"},{"id":"ref-for-map-iterate\u2460"}],"title":"4.4.1. \nInheriting Counters"}],"url":"https://infra.spec.whatwg.org/#map-iterate"}, "46374969": {"dfnID":"46374969","dfnText":"prefix","external":true,"refSections":[{"refs":[{"id":"ref-for-descdef-counter-style-prefix"}],"title":"3.4. \nText-based Markers: the list-style-type property"}],"url":"https://drafts.csswg.org/css-counter-styles-3/#descdef-counter-style-prefix"}, "466b2ed9": {"dfnID":"466b2ed9","dfnText":"inline-start","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-start"}],"title":"3.5. \nPositioning Markers: The list-style-position property"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#inline-start"}, "537cf076": {"dfnID":"537cf076","dfnText":"?","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-opt"},{"id":"ref-for-mult-opt\u2460"}],"title":"4.1. \nCreating Counters: the counter-reset property"},{"refs":[{"id":"ref-for-mult-opt\u2461"},{"id":"ref-for-mult-opt\u2462"}],"title":"4.2. \nManipulating Counter Values: the counter-increment and counter-set properties"},{"refs":[{"id":"ref-for-mult-opt\u2463"},{"id":"ref-for-mult-opt\u2464"}],"title":"4.7. \nOutputting Counters: the counter() and counters() functions"}],"url":"https://drafts.csswg.org/css-values-4/#mult-opt"}, "55e8f5de": {"dfnID":"55e8f5de","dfnText":"none","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-display-none"}],"title":"4.5. \nCounters in elements that do not generate boxes"}],"url":"https://drafts.csswg.org/css-display-4/#valdef-display-none"}, "581e7e57": {"dfnID":"581e7e57","dfnText":"default sizing algorithm","external":true,"refSections":[{"refs":[{"id":"ref-for-default-sizing-algorithm"}],"title":"3.3. \nImage Markers: the list-style-image property"}],"url":"https://drafts.csswg.org/css-images-3/#default-sizing-algorithm"}, "584e9c31": {"dfnID":"584e9c31","dfnText":"calc()","external":true,"refSections":[{"refs":[{"id":"ref-for-funcdef-calc"}],"title":"4.7. \nOutputting Counters: the counter() and counters() functions"}],"url":"https://drafts.csswg.org/css-values-4/#funcdef-calc"}, "5869f885": {"dfnID":"5869f885","dfnText":"::before","external":true,"refSections":[{"refs":[{"id":"ref-for-selectordef-before"}],"title":"3.1. \nThe ::marker Pseudo-Element"},{"refs":[{"id":"ref-for-selectordef-before\u2460"}],"title":"3.1.1. \nProperties Applying to ::marker"},{"refs":[{"id":"ref-for-selectordef-before\u2461"}],"title":"3.2. \nGenerating Marker Contents"}],"url":"https://drafts.csswg.org/css-pseudo-4/#selectordef-before"}, "5875aeb9": {"dfnID":"5875aeb9","dfnText":"::marker","external":true,"refSections":[{"refs":[{"id":"ref-for-selectordef-marker"}],"title":"1. \nIntroduction"},{"refs":[{"id":"ref-for-selectordef-marker\u2460"}],"title":"2. \nDeclaring a List Item"},{"refs":[{"id":"ref-for-selectordef-marker\u2461"}],"title":"3. \nMarkers"},{"refs":[{"id":"ref-for-selectordef-marker\u2462"},{"id":"ref-for-selectordef-marker\u2463"},{"id":"ref-for-selectordef-marker\u2464"},{"id":"ref-for-selectordef-marker\u2465"}],"title":"3.1. \nThe ::marker Pseudo-Element"},{"refs":[{"id":"ref-for-selectordef-marker\u2466"},{"id":"ref-for-selectordef-marker\u2467"},{"id":"ref-for-selectordef-marker\u2468"},{"id":"ref-for-selectordef-marker\u2460\u24ea"},{"id":"ref-for-selectordef-marker\u2460\u2460"},{"id":"ref-for-selectordef-marker\u2460\u2461"}],"title":"3.1.1. \nProperties Applying to ::marker"},{"refs":[{"id":"ref-for-selectordef-marker\u2460\u2462"},{"id":"ref-for-selectordef-marker\u2460\u2463"}],"title":"3.2. \nGenerating Marker Contents"},{"refs":[{"id":"ref-for-selectordef-marker\u2460\u2464"},{"id":"ref-for-selectordef-marker\u2460\u2465"}],"title":"3.5. \nPositioning Markers: The list-style-position property"},{"refs":[{"id":"ref-for-selectordef-marker\u2460\u2466"},{"id":"ref-for-selectordef-marker\u2460\u2467"},{"id":"ref-for-selectordef-marker\u2460\u2468"}],"title":"3.7. \nThe marker-side property"},{"refs":[{"id":"ref-for-selectordef-marker\u2461\u24ea"},{"id":"ref-for-selectordef-marker\u2461\u2460"},{"id":"ref-for-selectordef-marker\u2461\u2461"}],"title":"Changes since the 9 July 2020 WD"},{"refs":[{"id":"ref-for-selectordef-marker\u2461\u2462"},{"id":"ref-for-selectordef-marker\u2461\u2463"}],"title":"Changes since the 17 August 2019 WD"},{"refs":[{"id":"ref-for-selectordef-marker\u2461\u2464"}],"title":"Changes From CSS Level 2"}],"url":"https://drafts.csswg.org/css-pseudo-4/#selectordef-marker"}, "5bc8bd12": {"dfnID":"5bc8bd12","dfnText":"direction","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-direction"}],"title":"3.1.1. \nProperties Applying to ::marker"},{"refs":[{"id":"ref-for-propdef-direction\u2460"}],"title":"3.7. \nThe marker-side property"}],"url":"https://drafts.csswg.org/css-writing-modes-3/#propdef-direction"}, "621960b6": {"dfnID":"621960b6","dfnText":"user origin","external":true,"refSections":[{"refs":[{"id":"ref-for-cascade-origin-user"}],"title":"3.1.1. \nProperties Applying to ::marker"}],"url":"https://drafts.csswg.org/css-cascade-5/#cascade-origin-user"}, "63fe4250": {"dfnID":"63fe4250","dfnText":"user-agent origin","external":true,"refSections":[{"refs":[{"id":"ref-for-cascade-origin-ua"}],"title":"3.1.1. \nProperties Applying to ::marker"}],"url":"https://drafts.csswg.org/css-cascade-5/#cascade-origin-ua"}, "6501e5b3": {"dfnID":"6501e5b3","dfnText":"white-space","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-white-space"}],"title":"3.1.1. \nProperties Applying to ::marker"},{"refs":[{"id":"ref-for-propdef-white-space\u2460"},{"id":"ref-for-propdef-white-space\u2461"}],"title":"Changes since the 17 August 2019 WD"}],"url":"https://drafts.csswg.org/css-text-4/#propdef-white-space"}, "65d29011": {"dfnID":"65d29011","dfnText":"text-combine-upright","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-text-combine-upright"}],"title":"3.1.1. \nProperties Applying to ::marker"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#propdef-text-combine-upright"}, "6b6ef55d": {"dfnID":"6b6ef55d","dfnText":"inline","external":true,"refSections":[{"refs":[{"id":"ref-for-inline"}],"title":"3.2. \nGenerating Marker Contents"}],"url":"https://drafts.csswg.org/css-display-4/#inline"}, "6e9f0abf": {"dfnID":"6e9f0abf","dfnText":"disc","external":true,"refSections":[{"refs":[{"id":"ref-for-disc"}],"title":"4.7. \nOutputting Counters: the counter() and counters() functions"}],"url":"https://drafts.csswg.org/css-counter-styles-3/#disc"}, "6ec67710": {"dfnID":"6ec67710","dfnText":"|","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-one"}],"title":"3.3. \nImage Markers: the list-style-image property"},{"refs":[{"id":"ref-for-comb-one\u2460"},{"id":"ref-for-comb-one\u2461"}],"title":"3.4. \nText-based Markers: the list-style-type property"},{"refs":[{"id":"ref-for-comb-one\u2462"}],"title":"3.5. \nPositioning Markers: The list-style-position property"},{"refs":[{"id":"ref-for-comb-one\u2463"}],"title":"3.7. \nThe marker-side property"},{"refs":[{"id":"ref-for-comb-one\u2464"},{"id":"ref-for-comb-one\u2465"}],"title":"4.1. \nCreating Counters: the counter-reset property"},{"refs":[{"id":"ref-for-comb-one\u2466"},{"id":"ref-for-comb-one\u2467"}],"title":"4.2. \nManipulating Counter Values: the counter-increment and counter-set properties"},{"refs":[{"id":"ref-for-comb-one\u2468"}],"title":"4.7. \nOutputting Counters: the counter() and counters() functions"}],"url":"https://drafts.csswg.org/css-values-4/#comb-one"}, "70c9f859": {"dfnID":"70c9f859","dfnText":"<integer>","external":true,"refSections":[{"refs":[{"id":"ref-for-integer-value"},{"id":"ref-for-integer-value\u2460"},{"id":"ref-for-integer-value\u2461"},{"id":"ref-for-integer-value\u2462"},{"id":"ref-for-integer-value\u2463"},{"id":"ref-for-integer-value\u2464"}],"title":"4.1. \nCreating Counters: the counter-reset property"},{"refs":[{"id":"ref-for-integer-value\u2465"},{"id":"ref-for-integer-value\u2466"},{"id":"ref-for-integer-value\u2467"},{"id":"ref-for-integer-value\u2468"},{"id":"ref-for-integer-value\u2460\u24ea"}],"title":"4.2. \nManipulating Counter Values: the counter-increment and counter-set properties"}],"url":"https://drafts.csswg.org/css-values-4/#integer-value"}, "73ea1d43": {"dfnID":"73ea1d43","dfnText":"color","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-color"}],"title":"3.1.1. \nProperties Applying to ::marker"}],"url":"https://drafts.csswg.org/css-color-4/#propdef-color"}, "7486f2c8": {"dfnID":"7486f2c8","dfnText":"li","external":true,"refSections":[{"refs":[{"id":"ref-for-the-li-element"}],"title":"3.6. \nStyling Markers: the list-style shorthand property"}],"url":"https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element"}, "80eb9508": {"dfnID":"80eb9508","dfnText":"principal box","external":true,"refSections":[{"refs":[{"id":"ref-for-principal-box"}],"title":"3.5. \nPositioning Markers: The list-style-position property"}],"url":"https://drafts.csswg.org/css-display-4/#principal-box"}, "82805a4e": {"dfnID":"82805a4e","dfnText":"originating element","external":true,"refSections":[{"refs":[{"id":"ref-for-originating-element"},{"id":"ref-for-originating-element\u2460"}],"title":"3.1.1. \nProperties Applying to ::marker"},{"refs":[{"id":"ref-for-originating-element\u2461"},{"id":"ref-for-originating-element\u2462"}],"title":"3.2. \nGenerating Marker Contents"},{"refs":[{"id":"ref-for-originating-element\u2463"},{"id":"ref-for-originating-element\u2464"},{"id":"ref-for-originating-element\u2465"},{"id":"ref-for-originating-element\u2466"}],"title":"3.7. \nThe marker-side property"}],"url":"https://drafts.csswg.org/selectors-4/#originating-element"}, "8285a4c4": {"dfnID":"8285a4c4","dfnText":"outer display type","external":true,"refSections":[{"refs":[{"id":"ref-for-outer-display-type"}],"title":"Changes since the 17 August 2019 WD"}],"url":"https://drafts.csswg.org/css-display-4/#outer-display-type"}, "86928bde": {"dfnID":"86928bde","dfnText":"overflow","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-overflow"}],"title":"3.5. \nPositioning Markers: The list-style-position property"}],"url":"https://drafts.csswg.org/css-overflow-3/#propdef-overflow"}, "8a82fda1": {"dfnID":"8a82fda1","dfnText":"||","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-any"},{"id":"ref-for-comb-any\u2460"}],"title":"3.6. \nStyling Markers: the list-style shorthand property"}],"url":"https://drafts.csswg.org/css-values-4/#comb-any"}, "8ca32f09": {"dfnID":"8ca32f09","dfnText":"functional notation","external":true,"refSections":[{"refs":[{"id":"ref-for-functional-notation"},{"id":"ref-for-functional-notation\u2460"}],"title":"4. \nAutomatic Numbering With Counters"}],"url":"https://drafts.csswg.org/css-values-4/#functional-notation"}, "96626f55": {"dfnID":"96626f55","dfnText":"list-item","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-display-list-item"}],"title":"2. \nDeclaring a List Item"}],"url":"https://drafts.csswg.org/css-display-4/#valdef-display-list-item"}, "977d3003": {"dfnID":"977d3003","dfnText":"<string>","external":true,"refSections":[{"refs":[{"id":"ref-for-string-value"},{"id":"ref-for-string-value\u2460"},{"id":"ref-for-string-value\u2461"}],"title":"3.4. \nText-based Markers: the list-style-type property"},{"refs":[{"id":"ref-for-string-value\u2462"},{"id":"ref-for-string-value\u2463"}],"title":"4.7. \nOutputting Counters: the counter() and counters() functions"},{"refs":[{"id":"ref-for-string-value\u2464"}],"title":"Changes From CSS Level 2"}],"url":"https://drafts.csswg.org/css-values-4/#string-value"}, "982e17a3": {"dfnID":"982e17a3","dfnText":"unicode-bidi","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-unicode-bidi"}],"title":"3.1.1. \nProperties Applying to ::marker"}],"url":"https://drafts.csswg.org/css-writing-modes-3/#propdef-unicode-bidi"}, "991145b0": {"dfnID":"991145b0","dfnText":"none","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-content-none"}],"title":"3.1. \nThe ::marker Pseudo-Element"},{"refs":[{"id":"ref-for-valdef-content-none\u2460"}],"title":"4.5. \nCounters in elements that do not generate boxes"}],"url":"https://drafts.csswg.org/css-content-3/#valdef-content-none"}, "998b9e6e": {"dfnID":"998b9e6e","dfnText":"<image>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-image"},{"id":"ref-for-typedef-image\u2460"},{"id":"ref-for-typedef-image\u2461"},{"id":"ref-for-typedef-image\u2462"},{"id":"ref-for-typedef-image\u2463"}],"title":"3.3. \nImage Markers: the list-style-image property"}],"url":"https://drafts.csswg.org/css-images-3/#typedef-image"}, "99c988d6": {"dfnID":"99c988d6","dfnText":"remove","external":true,"refSections":[{"refs":[{"id":"ref-for-list-remove"}],"title":"4.4.2. \nInstantiating Counters"}],"url":"https://infra.spec.whatwg.org/#list-remove"}, "9bfc28f6": {"dfnID":"9bfc28f6","dfnText":"pseudo-element","external":true,"refSections":[{"refs":[{"id":"ref-for-pseudo-element"}],"title":"3.1.1. \nProperties Applying to ::marker"}],"url":"https://drafts.csswg.org/selectors-4/#pseudo-element"}, "9cd25054": {"dfnID":"9cd25054","dfnText":"computed value","external":true,"refSections":[{"refs":[{"id":"ref-for-computed-value"}],"title":"3.1.1. \nProperties Applying to ::marker"},{"refs":[{"id":"ref-for-computed-value\u2460"}],"title":"4.6. \nThe Implicit list-item Counter"}],"url":"https://drafts.csswg.org/css-cascade-5/#computed-value"}, "9f3d4f17": {"dfnID":"9f3d4f17","dfnText":"block container","external":true,"refSections":[{"refs":[{"id":"ref-for-block-container"},{"id":"ref-for-block-container\u2460"}],"title":"3.5. \nPositioning Markers: The list-style-position property"},{"refs":[{"id":"ref-for-block-container\u2461"}],"title":"Changes since the 17 August 2019 WD"}],"url":"https://drafts.csswg.org/css-display-4/#block-container"}, "9f9120ff": {"dfnID":"9f9120ff","dfnText":",","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-comma"},{"id":"ref-for-comb-comma\u2460"},{"id":"ref-for-comb-comma\u2461"}],"title":"4.7. \nOutputting Counters: the counter() and counters() functions"}],"url":"https://drafts.csswg.org/css-values-4/#comb-comma"}, "a00822b3": {"dfnID":"a00822b3","dfnText":"anonymous","external":true,"refSections":[{"refs":[{"id":"ref-for-anonymous"}],"title":"3.2. \nGenerating Marker Contents"}],"url":"https://drafts.csswg.org/css-display-4/#anonymous"}, "a3b18719": {"dfnID":"a3b18719","dfnText":"append","external":true,"refSections":[{"refs":[{"id":"ref-for-set-append"}],"title":"4.4.2. \nInstantiating Counters"}],"url":"https://infra.spec.whatwg.org/#set-append"}, "a4eb3c57": {"dfnID":"a4eb3c57","dfnText":"used value","external":true,"refSections":[{"refs":[{"id":"ref-for-used-value"}],"title":"4.7. \nOutputting Counters: the counter() and counters() functions"}],"url":"https://drafts.csswg.org/css-cascade-5/#used-value"}, "a73617e0": {"dfnID":"a73617e0","dfnText":"writing mode","external":true,"refSections":[{"refs":[{"id":"ref-for-writing-mode"}],"title":"3.5. \nPositioning Markers: The list-style-position property"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#writing-mode"}, "a8485ff4": {"dfnID":"a8485ff4","dfnText":"replaced element","external":true,"refSections":[{"refs":[{"id":"ref-for-replaced-element"}],"title":"3.2. \nGenerating Marker Contents"},{"refs":[{"id":"ref-for-replaced-element\u2460"},{"id":"ref-for-replaced-element\u2461"}],"title":"4.5. \nCounters in elements that do not generate boxes"}],"url":"https://drafts.csswg.org/css-display-4/#replaced-element"}, "a93f3bc2": {"dfnID":"a93f3bc2","dfnText":"hidden","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-visibility-hidden"}],"title":"4.5. \nCounters in elements that do not generate boxes"}],"url":"https://drafts.csswg.org/css-display-4/#valdef-visibility-hidden"}, "ab039d4e": {"dfnID":"ab039d4e","dfnText":"<counter-style>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-counter-style"},{"id":"ref-for-typedef-counter-style\u2460"},{"id":"ref-for-typedef-counter-style\u2461"},{"id":"ref-for-typedef-counter-style\u2462"},{"id":"ref-for-typedef-counter-style\u2463"},{"id":"ref-for-typedef-counter-style\u2464"},{"id":"ref-for-typedef-counter-style\u2465"}],"title":"3.4. \nText-based Markers: the list-style-type property"},{"refs":[{"id":"ref-for-typedef-counter-style\u2466"}],"title":"3.6. \nStyling Markers: the list-style shorthand property"},{"refs":[{"id":"ref-for-typedef-counter-style\u2467"},{"id":"ref-for-typedef-counter-style\u2468"},{"id":"ref-for-typedef-counter-style\u2460\u24ea"},{"id":"ref-for-typedef-counter-style\u2460\u2460"},{"id":"ref-for-typedef-counter-style\u2460\u2461"},{"id":"ref-for-typedef-counter-style\u2460\u2462"},{"id":"ref-for-typedef-counter-style\u2460\u2463"}],"title":"4.7. \nOutputting Counters: the counter() and counters() functions"},{"refs":[{"id":"ref-for-typedef-counter-style\u2460\u2464"}],"title":"Changes From CSS Level 2"}],"url":"https://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style"}, "abbd4058": {"dfnID":"abbd4058","dfnText":"rect","external":true,"refSections":[{"refs":[{"id":"ref-for-elementdef-rect"}],"title":"4.5. \nCounters in elements that do not generate boxes"}],"url":"https://svgwg.org/svg2-draft/shapes.html#elementdef-rect"}, "ac6ecea0": {"dfnID":"ac6ecea0","dfnText":"text sequence","external":true,"refSections":[{"refs":[{"id":"ref-for-css-text-sequence"},{"id":"ref-for-css-text-sequence\u2460"}],"title":"3.2. \nGenerating Marker Contents"}],"url":"https://drafts.csswg.org/css-display-4/#css-text-sequence"}, "ae8def21": {"dfnID":"ae8def21","dfnText":"contain","external":true,"refSections":[{"refs":[{"id":"ref-for-list-contain"}],"title":"4.4.1. \nInheriting Counters"}],"url":"https://infra.spec.whatwg.org/#list-contain"}, "aee00462": {"dfnID":"aee00462","dfnText":"option","external":true,"refSections":[{"refs":[{"id":"ref-for-the-option-element"}],"title":"4.5. \nCounters in elements that do not generate boxes"}],"url":"https://html.spec.whatwg.org/multipage/form-elements.html#the-option-element"}, "b1b99838": {"dfnID":"b1b99838","dfnText":"counter style","external":true,"refSections":[{"refs":[{"id":"ref-for-counter-style"},{"id":"ref-for-counter-style\u2460"},{"id":"ref-for-counter-style\u2461"}],"title":"4.7. \nOutputting Counters: the counter() and counters() functions"}],"url":"https://drafts.csswg.org/css-counter-styles-3/#counter-style"}, "b2356074": {"dfnID":"b2356074","dfnText":"word-spacing","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-word-spacing"}],"title":"3.1.1. \nProperties Applying to ::marker"}],"url":"https://drafts.csswg.org/css-text-4/#propdef-word-spacing"}, "b8857127": {"dfnID":"b8857127","dfnText":"suffix","external":true,"refSections":[{"refs":[{"id":"ref-for-descdef-counter-style-suffix"}],"title":"3.4. \nText-based Markers: the list-style-type property"}],"url":"https://drafts.csswg.org/css-counter-styles-3/#descdef-counter-style-suffix"}, "b8a0ba74": {"dfnID":"b8a0ba74","dfnText":"position","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-position"}],"title":"Changes since the 20 March 2014 WD"}],"url":"https://drafts.csswg.org/css-position-3/#propdef-position"}, "bedd9d42": {"dfnID":"bedd9d42","dfnText":"+","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-one-plus"}],"title":"4.1. \nCreating Counters: the counter-reset property"},{"refs":[{"id":"ref-for-mult-one-plus\u2460"},{"id":"ref-for-mult-one-plus\u2461"}],"title":"4.2. \nManipulating Counter Values: the counter-increment and counter-set properties"}],"url":"https://drafts.csswg.org/css-values-4/#mult-one-plus"}, "cacc0af2": {"dfnID":"cacc0af2","dfnText":"letter-spacing","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-letter-spacing"}],"title":"3.1.1. \nProperties Applying to ::marker"}],"url":"https://drafts.csswg.org/css-text-4/#propdef-letter-spacing"}, "cbc54f93": {"dfnID":"cbc54f93","dfnText":"text-transform","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-text-transform"}],"title":"3.1.1. \nProperties Applying to ::marker"},{"refs":[{"id":"ref-for-propdef-text-transform\u2460"}],"title":"Changes since the 9 July 2020 WD"}],"url":"https://drafts.csswg.org/css-text-4/#propdef-text-transform"}, "counter": {"dfnID":"counter","dfnText":"counter","external":false,"refSections":[{"refs":[{"id":"ref-for-counter"}],"title":"1. \nIntroduction"},{"refs":[{"id":"ref-for-counter\u2460"}],"title":"2. \nDeclaring a List Item"},{"refs":[{"id":"ref-for-counter\u2461"},{"id":"ref-for-counter\u2462"}],"title":"4. \nAutomatic Numbering With Counters"},{"refs":[{"id":"ref-for-counter\u2463"}],"title":"4.1. \nCreating Counters: the counter-reset property"},{"refs":[{"id":"ref-for-counter\u2464"}],"title":"4.2. \nManipulating Counter Values: the counter-increment and counter-set properties"},{"refs":[{"id":"ref-for-counter\u2465"},{"id":"ref-for-counter\u2466"}],"title":"4.3. \nNested Counters and Scope"},{"refs":[{"id":"ref-for-counter\u2467"},{"id":"ref-for-counter\u2468"}],"title":"4.4. \nCreating and Inheriting Counters"},{"refs":[{"id":"ref-for-counter\u2460\u24ea"}],"title":"4.4.1. \nInheriting Counters"},{"refs":[{"id":"ref-for-counter\u2460\u2460"},{"id":"ref-for-counter\u2460\u2461"},{"id":"ref-for-counter\u2460\u2462"},{"id":"ref-for-counter\u2460\u2463"},{"id":"ref-for-counter\u2460\u2464"},{"id":"ref-for-counter\u2460\u2465"},{"id":"ref-for-counter\u2460\u2466"}],"title":"4.4.2. \nInstantiating Counters"},{"refs":[{"id":"ref-for-counter\u2460\u2467"},{"id":"ref-for-counter\u2460\u2468"},{"id":"ref-for-counter\u2461\u24ea"},{"id":"ref-for-counter\u2461\u2460"},{"id":"ref-for-counter\u2461\u2461"},{"id":"ref-for-counter\u2461\u2462"}],"title":"4.6. \nThe Implicit list-item Counter"},{"refs":[{"id":"ref-for-counter\u2461\u2463"},{"id":"ref-for-counter\u2461\u2464"},{"id":"ref-for-counter\u2461\u2465"},{"id":"ref-for-counter\u2461\u2466"}],"title":"4.7. \nOutputting Counters: the counter() and counters() functions"}],"url":"#counter"}, "counter-properties": {"dfnID":"counter-properties","dfnText":"counter properties","external":false,"refSections":[],"url":"#counter-properties"}, "counter-scope": {"dfnID":"counter-scope","dfnText":"scope","external":false,"refSections":[{"refs":[{"id":"ref-for-counter-scope"}],"title":"4.4. \nCreating and Inheriting Counters"},{"refs":[{"id":"ref-for-counter-scope\u2460"}],"title":"4.4.2. \nInstantiating Counters"}],"url":"#counter-scope"}, "css-counter-creator": {"dfnID":"css-counter-creator","dfnText":"creator","external":false,"refSections":[{"refs":[{"id":"ref-for-css-counter-creator"}],"title":"4.4. \nCreating and Inheriting Counters"},{"refs":[{"id":"ref-for-css-counter-creator\u2460"}],"title":"4.4.1. \nInheriting Counters"}],"url":"#css-counter-creator"}, "css-counter-name": {"dfnID":"css-counter-name","dfnText":"name","external":false,"refSections":[],"url":"#css-counter-name"}, "css-counter-reversed": {"dfnID":"css-counter-reversed","dfnText":"reversed","external":false,"refSections":[{"refs":[{"id":"ref-for-css-counter-reversed"},{"id":"ref-for-css-counter-reversed\u2460"}],"title":"4. \nAutomatic Numbering With Counters"},{"refs":[{"id":"ref-for-css-counter-reversed\u2461"}],"title":"4.1. \nCreating Counters: the counter-reset property"},{"refs":[{"id":"ref-for-css-counter-reversed\u2462"}],"title":"4.4. \nCreating and Inheriting Counters"},{"refs":[{"id":"ref-for-css-counter-reversed\u2463"}],"title":"4.4.2. \nInstantiating Counters"},{"refs":[{"id":"ref-for-css-counter-reversed\u2464"}],"title":"4.6. \nThe Implicit list-item Counter"}],"url":"#css-counter-reversed"}, "css-counter-value": {"dfnID":"css-counter-value","dfnText":"value","external":false,"refSections":[],"url":"#css-counter-value"}, "css-counters-set": {"dfnID":"css-counters-set","dfnText":"CSS counters set","external":false,"refSections":[{"refs":[{"id":"ref-for-css-counters-set"},{"id":"ref-for-css-counters-set\u2460"},{"id":"ref-for-css-counters-set\u2461"},{"id":"ref-for-css-counters-set\u2462"},{"id":"ref-for-css-counters-set\u2463"},{"id":"ref-for-css-counters-set\u2464"}],"title":"4.4.1. \nInheriting Counters"},{"refs":[{"id":"ref-for-css-counters-set\u2465"}],"title":"4.4.2. \nInstantiating Counters"},{"refs":[{"id":"ref-for-css-counters-set\u2466"},{"id":"ref-for-css-counters-set\u2467"}],"title":"4.7. \nOutputting Counters: the counter() and counters() functions"}],"url":"#css-counters-set"}, "d02b1d43": {"dfnID":"d02b1d43","dfnText":"forced line break","external":true,"refSections":[{"refs":[{"id":"ref-for-forced-line-break"}],"title":"3.2. \nGenerating Marker Contents"}],"url":"https://drafts.csswg.org/css-text-4/#forced-line-break"}, "d4d68fad": {"dfnID":"d4d68fad","dfnText":"normal","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-content-normal"}],"title":"3.2. \nGenerating Marker Contents"},{"refs":[{"id":"ref-for-valdef-content-normal\u2460"}],"title":"3.3. \nImage Markers: the list-style-image property"},{"refs":[{"id":"ref-for-valdef-content-normal\u2461"}],"title":"3.4. \nText-based Markers: the list-style-type property"}],"url":"https://drafts.csswg.org/css-content-3/#valdef-content-normal"}, "d7fa3e1c": {"dfnID":"d7fa3e1c","dfnText":"inline-level","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-level"}],"title":"Changes From CSS Level 2"}],"url":"https://drafts.csswg.org/css-display-4/#inline-level"}, "da1e187a": {"dfnID":"da1e187a","dfnText":"ul","external":true,"refSections":[{"refs":[{"id":"ref-for-the-ul-element"},{"id":"ref-for-the-ul-element\u2460"}],"title":"3.6. \nStyling Markers: the list-style shorthand property"},{"refs":[{"id":"ref-for-the-ul-element\u2461"},{"id":"ref-for-the-ul-element\u2462"}],"title":"4.4.1. \nInheriting Counters"}],"url":"https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element"}, "de6d76c2": {"dfnID":"de6d76c2","dfnText":"cascade","external":true,"refSections":[{"refs":[{"id":"ref-for-cascade"}],"title":"3.1.1. \nProperties Applying to ::marker"},{"refs":[{"id":"ref-for-cascade\u2460"}],"title":"4.1. \nCreating Counters: the counter-reset property"}],"url":"https://drafts.csswg.org/css-cascade-6/#cascade"}, "e149ddf7": {"dfnID":"e149ddf7","dfnText":"decimal","external":true,"refSections":[{"refs":[{"id":"ref-for-decimal"}],"title":"3.4. \nText-based Markers: the list-style-type property"},{"refs":[{"id":"ref-for-decimal\u2460"}],"title":"4.7. \nOutputting Counters: the counter() and counters() functions"}],"url":"https://drafts.csswg.org/css-counter-styles-3/#decimal"}, "e274345c": {"dfnID":"e274345c","dfnText":"<custom-ident>","external":true,"refSections":[{"refs":[{"id":"ref-for-identifier-value"}],"title":"3.6. \nStyling Markers: the list-style shorthand property"},{"refs":[{"id":"ref-for-identifier-value\u2460"}],"title":"4. \nAutomatic Numbering With Counters"},{"refs":[{"id":"ref-for-identifier-value\u2461"}],"title":"Changes since the 20 March 2014 WD"}],"url":"https://drafts.csswg.org/css-values-4/#identifier-value"}, "e7f0dd6c": {"dfnID":"e7f0dd6c","dfnText":"display","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-display"}],"title":"2. \nDeclaring a List Item"},{"refs":[{"id":"ref-for-propdef-display\u2460"}],"title":"4.5. \nCounters in elements that do not generate boxes"}],"url":"https://drafts.csswg.org/css-display-4/#propdef-display"}, "f210b721": {"dfnID":"f210b721","dfnText":"order","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-order"},{"id":"ref-for-propdef-order\u2460"},{"id":"ref-for-propdef-order\u2461"}],"title":"4.7. \nOutputting Counters: the counter() and counters() functions"}],"url":"https://drafts.csswg.org/css-display-4/#propdef-order"}, "f29863d8": {"dfnID":"f29863d8","dfnText":"ol","external":true,"refSections":[{"refs":[{"id":"ref-for-the-ol-element"}],"title":"3.6. \nStyling Markers: the list-style shorthand property"},{"refs":[{"id":"ref-for-the-ol-element\u2460"},{"id":"ref-for-the-ol-element\u2461"}],"title":"4.3. \nNested Counters and Scope"}],"url":"https://html.spec.whatwg.org/multipage/grouping-content.html#the-ol-element"}, "f7960529": {"dfnID":"f7960529","dfnText":"root","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-tree-root"}],"title":"4.4.1. \nInheriting Counters"}],"url":"https://dom.spec.whatwg.org/#concept-tree-root"}, "fd0c9e35": {"dfnID":"fd0c9e35","dfnText":"::after","external":true,"refSections":[{"refs":[{"id":"ref-for-selectordef-after"}],"title":"3.1.1. \nProperties Applying to ::marker"}],"url":"https://drafts.csswg.org/css-pseudo-4/#selectordef-after"}, "funcdef-counter": {"dfnID":"funcdef-counter","dfnText":"counter()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-counter"},{"id":"ref-for-funcdef-counter\u2460"}],"title":"4. \nAutomatic Numbering With Counters"},{"refs":[{"id":"ref-for-funcdef-counter\u2461"}],"title":"4.3. \nNested Counters and Scope"},{"refs":[{"id":"ref-for-funcdef-counter\u2462"}],"title":"4.4.2. \nInstantiating Counters"},{"refs":[{"id":"ref-for-funcdef-counter\u2463"},{"id":"ref-for-funcdef-counter\u2464"},{"id":"ref-for-funcdef-counter\u2465"},{"id":"ref-for-funcdef-counter\u2466"}],"title":"4.7. \nOutputting Counters: the counter() and counters() functions"}],"url":"#funcdef-counter"}, "funcdef-counters": {"dfnID":"funcdef-counters","dfnText":"counters()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-counters"},{"id":"ref-for-funcdef-counters\u2460"}],"title":"4. \nAutomatic Numbering With Counters"},{"refs":[{"id":"ref-for-funcdef-counters\u2461"}],"title":"4.3. \nNested Counters and Scope"},{"refs":[{"id":"ref-for-funcdef-counters\u2462"}],"title":"4.4.2. \nInstantiating Counters"},{"refs":[{"id":"ref-for-funcdef-counters\u2463"},{"id":"ref-for-funcdef-counters\u2464"},{"id":"ref-for-funcdef-counters\u2465"},{"id":"ref-for-funcdef-counters\u2466"},{"id":"ref-for-funcdef-counters\u2467"},{"id":"ref-for-funcdef-counters\u2468"}],"title":"4.7. \nOutputting Counters: the counter() and counters() functions"}],"url":"#funcdef-counters"}, "inherit-counters": {"dfnID":"inherit-counters","dfnText":"inherit counters","external":false,"refSections":[{"refs":[{"id":"ref-for-inherit-counters"}],"title":"4. \nAutomatic Numbering With Counters"},{"refs":[{"id":"ref-for-inherit-counters\u2460"}],"title":"4.4.1. \nInheriting Counters"}],"url":"#inherit-counters"}, "innermost": {"dfnID":"innermost","dfnText":"innermost","external":false,"refSections":[{"refs":[{"id":"ref-for-innermost"}],"title":"4.3. \nNested Counters and Scope"},{"refs":[{"id":"ref-for-innermost\u2460"},{"id":"ref-for-innermost\u2461"}],"title":"4.7. \nOutputting Counters: the counter() and counters() functions"}],"url":"#innermost"}, "instantiate-counter": {"dfnID":"instantiate-counter","dfnText":"instantiate a counter","external":false,"refSections":[{"refs":[{"id":"ref-for-instantiate-counter"}],"title":"4. \nAutomatic Numbering With Counters"},{"refs":[{"id":"ref-for-instantiate-counter\u2460"},{"id":"ref-for-instantiate-counter\u2461"},{"id":"ref-for-instantiate-counter\u2462"}],"title":"4.1. \nCreating Counters: the counter-reset property"},{"refs":[{"id":"ref-for-instantiate-counter\u2463"},{"id":"ref-for-instantiate-counter\u2464"}],"title":"4.2. \nManipulating Counter Values: the counter-increment and counter-set properties"},{"refs":[{"id":"ref-for-instantiate-counter\u2465"},{"id":"ref-for-instantiate-counter\u2466"}],"title":"4.3. \nNested Counters and Scope"},{"refs":[{"id":"ref-for-instantiate-counter\u2467"},{"id":"ref-for-instantiate-counter\u2468"},{"id":"ref-for-instantiate-counter\u2460\u24ea"}],"title":"4.4.2. \nInstantiating Counters"},{"refs":[{"id":"ref-for-instantiate-counter\u2460\u2460"}],"title":"4.6. \nThe Implicit list-item Counter"},{"refs":[{"id":"ref-for-instantiate-counter\u2460\u2461"}],"title":"4.7. \nOutputting Counters: the counter() and counters() functions"}],"url":"#instantiate-counter"}, "list-item": {"dfnID":"list-item","dfnText":"list item","external":false,"refSections":[{"refs":[{"id":"ref-for-list-item"},{"id":"ref-for-list-item\u2460"}],"title":"2. \nDeclaring a List Item"},{"refs":[{"id":"ref-for-list-item\u2461"},{"id":"ref-for-list-item\u2462"},{"id":"ref-for-list-item\u2463"},{"id":"ref-for-list-item\u2464"},{"id":"ref-for-list-item\u2465"}],"title":"3. \nMarkers"},{"refs":[{"id":"ref-for-list-item\u2466"},{"id":"ref-for-list-item\u2467"},{"id":"ref-for-list-item\u2468"}],"title":"3.1. \nThe ::marker Pseudo-Element"},{"refs":[{"id":"ref-for-list-item\u2460\u24ea"},{"id":"ref-for-list-item\u2460\u2460"}],"title":"3.3. \nImage Markers: the list-style-image property"},{"refs":[{"id":"ref-for-list-item\u2460\u2461"},{"id":"ref-for-list-item\u2460\u2462"}],"title":"3.4. \nText-based Markers: the list-style-type property"},{"refs":[{"id":"ref-for-list-item\u2460\u2463"},{"id":"ref-for-list-item\u2460\u2464"},{"id":"ref-for-list-item\u2460\u2465"},{"id":"ref-for-list-item\u2460\u2466"},{"id":"ref-for-list-item\u2460\u2467"}],"title":"3.5. \nPositioning Markers: The list-style-position property"},{"refs":[{"id":"ref-for-list-item\u2460\u2468"}],"title":"3.6. \nStyling Markers: the list-style shorthand property"},{"refs":[{"id":"ref-for-list-item\u2461\u24ea"}],"title":"3.7. \nThe marker-side property"},{"refs":[{"id":"ref-for-list-item\u2461\u2460"},{"id":"ref-for-list-item\u2461\u2461"},{"id":"ref-for-list-item\u2461\u2462"},{"id":"ref-for-list-item\u2461\u2463"},{"id":"ref-for-list-item\u2461\u2464"},{"id":"ref-for-list-item\u2461\u2465"},{"id":"ref-for-list-item\u2461\u2466"},{"id":"ref-for-list-item\u2461\u2467"},{"id":"ref-for-list-item\u2461\u2468"}],"title":"4.6. \nThe Implicit list-item Counter"},{"refs":[{"id":"ref-for-list-item\u2462\u24ea"}],"title":"Changes From CSS Level 2"}],"url":"#list-item"}, "list-style-position-outside": {"dfnID":"list-style-position-outside","dfnText":"outside","external":false,"refSections":[{"refs":[{"id":"ref-for-list-style-position-outside"}],"title":"3.5. \nPositioning Markers: The list-style-position property"},{"refs":[{"id":"ref-for-list-style-position-outside\u2460"}],"title":"3.7. \nThe marker-side property"},{"refs":[{"id":"ref-for-list-style-position-outside\u2461"}],"title":"Changes since the 17 August 2019 WD"}],"url":"#list-style-position-outside"}, "marker": {"dfnID":"marker","dfnText":"marker","external":false,"refSections":[{"refs":[{"id":"ref-for-marker"},{"id":"ref-for-marker\u2460"},{"id":"ref-for-marker\u2461"}],"title":"3. \nMarkers"},{"refs":[{"id":"ref-for-marker\u2462"},{"id":"ref-for-marker\u2463"}],"title":"3.1. \nThe ::marker Pseudo-Element"},{"refs":[{"id":"ref-for-marker\u2464"},{"id":"ref-for-marker\u2465"},{"id":"ref-for-marker\u2466"}],"title":"3.1.1. \nProperties Applying to ::marker"},{"refs":[{"id":"ref-for-marker\u2467"},{"id":"ref-for-marker\u2468"},{"id":"ref-for-marker\u2460\u24ea"},{"id":"ref-for-marker\u2460\u2460"},{"id":"ref-for-marker\u2460\u2461"}],"title":"3.2. \nGenerating Marker Contents"},{"refs":[{"id":"ref-for-marker\u2460\u2462"}],"title":"3.3. \nImage Markers: the list-style-image property"},{"refs":[{"id":"ref-for-marker\u2460\u2463"}],"title":"3.4. \nText-based Markers: the list-style-type property"},{"refs":[{"id":"ref-for-marker\u2460\u2464"},{"id":"ref-for-marker\u2460\u2465"},{"id":"ref-for-marker\u2460\u2466"}],"title":"3.7. \nThe marker-side property"}],"url":"#marker"}, "marker-image": {"dfnID":"marker-image","dfnText":"marker image","external":false,"refSections":[{"refs":[{"id":"ref-for-marker-image"},{"id":"ref-for-marker-image\u2460"}],"title":"3.2. \nGenerating Marker Contents"},{"refs":[{"id":"ref-for-marker-image\u2461"},{"id":"ref-for-marker-image\u2462"},{"id":"ref-for-marker-image\u2463"},{"id":"ref-for-marker-image\u2464"}],"title":"3.3. \nImage Markers: the list-style-image property"},{"refs":[{"id":"ref-for-marker-image\u2465"}],"title":"3.4. \nText-based Markers: the list-style-type property"}],"url":"#marker-image"}, "marker-string": {"dfnID":"marker-string","dfnText":"marker string","external":false,"refSections":[{"refs":[{"id":"ref-for-marker-string"},{"id":"ref-for-marker-string\u2460"}],"title":"3.2. \nGenerating Marker Contents"},{"refs":[{"id":"ref-for-marker-string\u2461"},{"id":"ref-for-marker-string\u2462"},{"id":"ref-for-marker-string\u2463"},{"id":"ref-for-marker-string\u2464"}],"title":"3.4. \nText-based Markers: the list-style-type property"},{"refs":[{"id":"ref-for-marker-string\u2465"}],"title":"4.6. \nThe Implicit list-item Counter"}],"url":"#marker-string"}, "propdef-counter-increment": {"dfnID":"propdef-counter-increment","dfnText":"counter-increment","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-counter-increment"},{"id":"ref-for-propdef-counter-increment\u2460"}],"title":"4. \nAutomatic Numbering With Counters"},{"refs":[{"id":"ref-for-propdef-counter-increment\u2461"}],"title":"4.1. \nCreating Counters: the counter-reset property"},{"refs":[{"id":"ref-for-propdef-counter-increment\u2462"},{"id":"ref-for-propdef-counter-increment\u2463"},{"id":"ref-for-propdef-counter-increment\u2464"},{"id":"ref-for-propdef-counter-increment\u2465"}],"title":"4.2. \nManipulating Counter Values: the counter-increment and counter-set properties"},{"refs":[{"id":"ref-for-propdef-counter-increment\u2466"},{"id":"ref-for-propdef-counter-increment\u2467"}],"title":"4.4.2. \nInstantiating Counters"},{"refs":[{"id":"ref-for-propdef-counter-increment\u2468"},{"id":"ref-for-propdef-counter-increment\u2460\u24ea"},{"id":"ref-for-propdef-counter-increment\u2460\u2460"},{"id":"ref-for-propdef-counter-increment\u2460\u2461"},{"id":"ref-for-propdef-counter-increment\u2460\u2462"},{"id":"ref-for-propdef-counter-increment\u2460\u2463"},{"id":"ref-for-propdef-counter-increment\u2460\u2464"}],"title":"4.6. \nThe Implicit list-item Counter"},{"refs":[{"id":"ref-for-propdef-counter-increment\u2460\u2465"}],"title":"Changes since the 20 March 2014 WD"}],"url":"#propdef-counter-increment"}, "propdef-counter-reset": {"dfnID":"propdef-counter-reset","dfnText":"counter-reset","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-counter-reset"},{"id":"ref-for-propdef-counter-reset\u2460"}],"title":"4. \nAutomatic Numbering With Counters"},{"refs":[{"id":"ref-for-propdef-counter-reset\u2461"},{"id":"ref-for-propdef-counter-reset\u2462"}],"title":"4.1. \nCreating Counters: the counter-reset property"},{"refs":[{"id":"ref-for-propdef-counter-reset\u2463"}],"title":"4.3. \nNested Counters and Scope"},{"refs":[{"id":"ref-for-propdef-counter-reset\u2464"}],"title":"4.4.2. \nInstantiating Counters"}],"url":"#propdef-counter-reset"}, "propdef-counter-set": {"dfnID":"propdef-counter-set","dfnText":"counter-set","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-counter-set"},{"id":"ref-for-propdef-counter-set\u2460"}],"title":"4. \nAutomatic Numbering With Counters"},{"refs":[{"id":"ref-for-propdef-counter-set\u2461"}],"title":"4.1. \nCreating Counters: the counter-reset property"},{"refs":[{"id":"ref-for-propdef-counter-set\u2462"},{"id":"ref-for-propdef-counter-set\u2463"},{"id":"ref-for-propdef-counter-set\u2464"},{"id":"ref-for-propdef-counter-set\u2465"}],"title":"4.2. \nManipulating Counter Values: the counter-increment and counter-set properties"},{"refs":[{"id":"ref-for-propdef-counter-set\u2466"},{"id":"ref-for-propdef-counter-set\u2467"}],"title":"4.4.2. \nInstantiating Counters"},{"refs":[{"id":"ref-for-propdef-counter-set\u2468"}],"title":"Changes since the 20 March 2014 WD"},{"refs":[{"id":"ref-for-propdef-counter-set\u2460\u24ea"}],"title":"Changes From CSS Level 2"}],"url":"#propdef-counter-set"}, "propdef-list-style": {"dfnID":"propdef-list-style","dfnText":"list-style","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-list-style"},{"id":"ref-for-propdef-list-style\u2460"},{"id":"ref-for-propdef-list-style\u2461"},{"id":"ref-for-propdef-list-style\u2462"}],"title":"3.6. \nStyling Markers: the list-style shorthand property"},{"refs":[{"id":"ref-for-propdef-list-style\u2463"}],"title":"4.3. \nNested Counters and Scope"},{"refs":[{"id":"ref-for-propdef-list-style\u2464"}],"title":"Changes since the 20 March 2014 WD"}],"url":"#propdef-list-style"}, "propdef-list-style-image": {"dfnID":"propdef-list-style-image","dfnText":"list-style-image","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-list-style-image"}],"title":"3. \nMarkers"},{"refs":[{"id":"ref-for-propdef-list-style-image\u2460"}],"title":"3.2. \nGenerating Marker Contents"},{"refs":[{"id":"ref-for-propdef-list-style-image\u2461"}],"title":"3.3. \nImage Markers: the list-style-image property"},{"refs":[{"id":"ref-for-propdef-list-style-image\u2462"},{"id":"ref-for-propdef-list-style-image\u2463"},{"id":"ref-for-propdef-list-style-image\u2464"}],"title":"3.6. \nStyling Markers: the list-style shorthand property"}],"url":"#propdef-list-style-image"}, "propdef-list-style-position": {"dfnID":"propdef-list-style-position","dfnText":"list-style-position","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-list-style-position"}],"title":"3.5. \nPositioning Markers: The list-style-position property"},{"refs":[{"id":"ref-for-propdef-list-style-position\u2460"},{"id":"ref-for-propdef-list-style-position\u2461"}],"title":"3.6. \nStyling Markers: the list-style shorthand property"}],"url":"#propdef-list-style-position"}, "propdef-list-style-type": {"dfnID":"propdef-list-style-type","dfnText":"list-style-type","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-list-style-type"}],"title":"3. \nMarkers"},{"refs":[{"id":"ref-for-propdef-list-style-type\u2460"}],"title":"3.2. \nGenerating Marker Contents"},{"refs":[{"id":"ref-for-propdef-list-style-type\u2461"}],"title":"3.4. \nText-based Markers: the list-style-type property"},{"refs":[{"id":"ref-for-propdef-list-style-type\u2462"},{"id":"ref-for-propdef-list-style-type\u2463"},{"id":"ref-for-propdef-list-style-type\u2464"},{"id":"ref-for-propdef-list-style-type\u2465"}],"title":"3.6. \nStyling Markers: the list-style shorthand property"},{"refs":[{"id":"ref-for-propdef-list-style-type\u2466"},{"id":"ref-for-propdef-list-style-type\u2467"}],"title":"4.6. \nThe Implicit list-item Counter"},{"refs":[{"id":"ref-for-propdef-list-style-type\u2468"}],"title":"4.7. \nOutputting Counters: the counter() and counters() functions"},{"refs":[{"id":"ref-for-propdef-list-style-type\u2460\u24ea"}],"title":"Changes since the 20 March 2014 WD"},{"refs":[{"id":"ref-for-propdef-list-style-type\u2460\u2460"}],"title":"Changes From CSS Level 2"}],"url":"#propdef-list-style-type"}, "propdef-marker-side": {"dfnID":"propdef-marker-side","dfnText":"marker-side","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-marker-side"}],"title":"3.5. \nPositioning Markers: The list-style-position property"},{"refs":[{"id":"ref-for-propdef-marker-side\u2460"},{"id":"ref-for-propdef-marker-side\u2461"},{"id":"ref-for-propdef-marker-side\u2462"}],"title":"3.7. \nThe marker-side property"},{"refs":[{"id":"ref-for-propdef-marker-side\u2463"}],"title":"Changes since the 20 March 2014 WD"}],"url":"#propdef-marker-side"}, "typedef-counter": {"dfnID":"typedef-counter","dfnText":"<counter>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-counter"}],"title":"4.7. \nOutputting Counters: the counter() and counters() functions"}],"url":"#typedef-counter"}, "typedef-counter-name": {"dfnID":"typedef-counter-name","dfnText":"<counter-name>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-counter-name"},{"id":"ref-for-typedef-counter-name\u2460"},{"id":"ref-for-typedef-counter-name\u2461"},{"id":"ref-for-typedef-counter-name\u2462"}],"title":"4. \nAutomatic Numbering With Counters"},{"refs":[{"id":"ref-for-typedef-counter-name\u2463"},{"id":"ref-for-typedef-counter-name\u2464"},{"id":"ref-for-typedef-counter-name\u2465"},{"id":"ref-for-typedef-counter-name\u2466"},{"id":"ref-for-typedef-counter-name\u2467"}],"title":"4.1. \nCreating Counters: the counter-reset property"},{"refs":[{"id":"ref-for-typedef-counter-name\u2468"},{"id":"ref-for-typedef-counter-name\u2460\u24ea"},{"id":"ref-for-typedef-counter-name\u2460\u2460"},{"id":"ref-for-typedef-counter-name\u2460\u2461"}],"title":"4.2. \nManipulating Counter Values: the counter-increment and counter-set properties"},{"refs":[{"id":"ref-for-typedef-counter-name\u2460\u2462"},{"id":"ref-for-typedef-counter-name\u2460\u2463"},{"id":"ref-for-typedef-counter-name\u2460\u2464"},{"id":"ref-for-typedef-counter-name\u2460\u2465"},{"id":"ref-for-typedef-counter-name\u2460\u2466"},{"id":"ref-for-typedef-counter-name\u2460\u2467"}],"title":"4.7. \nOutputting Counters: the counter() and counters() functions"}],"url":"#typedef-counter-name"}, "typedef-reversed-counter-name": {"dfnID":"typedef-reversed-counter-name","dfnText":"<reversed-counter-name>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-reversed-counter-name"}],"title":"4. \nAutomatic Numbering With Counters"},{"refs":[{"id":"ref-for-typedef-reversed-counter-name\u2460"},{"id":"ref-for-typedef-reversed-counter-name\u2461"}],"title":"4.1. \nCreating Counters: the counter-reset property"}],"url":"#typedef-reversed-counter-name"}, "valdef-counter-increment-list-item": {"dfnID":"valdef-counter-increment-list-item","dfnText":"list-item","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-counter-increment-list-item"}],"title":"1. \nIntroduction"},{"refs":[{"id":"ref-for-valdef-counter-increment-list-item\u2460"}],"title":"2. \nDeclaring a List Item"},{"refs":[{"id":"ref-for-valdef-counter-increment-list-item\u2461"},{"id":"ref-for-valdef-counter-increment-list-item\u2462"}],"title":"3.4. \nText-based Markers: the list-style-type property"},{"refs":[{"id":"ref-for-valdef-counter-increment-list-item\u2463"},{"id":"ref-for-valdef-counter-increment-list-item\u2464"},{"id":"ref-for-valdef-counter-increment-list-item\u2465"},{"id":"ref-for-valdef-counter-increment-list-item\u2466"},{"id":"ref-for-valdef-counter-increment-list-item\u2467"},{"id":"ref-for-valdef-counter-increment-list-item\u2468"},{"id":"ref-for-valdef-counter-increment-list-item\u2460\u24ea"},{"id":"ref-for-valdef-counter-increment-list-item\u2460\u2460"},{"id":"ref-for-valdef-counter-increment-list-item\u2460\u2461"},{"id":"ref-for-valdef-counter-increment-list-item\u2460\u2462"},{"id":"ref-for-valdef-counter-increment-list-item\u2460\u2463"}],"title":"4.6. \nThe Implicit list-item Counter"},{"refs":[{"id":"ref-for-valdef-counter-increment-list-item\u2460\u2464"}],"title":"Changes since the 20 March 2014 WD"},{"refs":[{"id":"ref-for-valdef-counter-increment-list-item\u2460\u2465"}],"title":"Changes From CSS Level 2"}],"url":"#valdef-counter-increment-list-item"}, "valdef-counter-reset-counter-name-integer": {"dfnID":"valdef-counter-reset-counter-name-integer","dfnText":"<counter-name> <integer>?","external":false,"refSections":[],"url":"#valdef-counter-reset-counter-name-integer"}, "valdef-counter-reset-none": {"dfnID":"valdef-counter-reset-none","dfnText":"none","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-counter-reset-none"}],"title":"4. \nAutomatic Numbering With Counters"},{"refs":[{"id":"ref-for-valdef-counter-reset-none\u2460"}],"title":"4.1. \nCreating Counters: the counter-reset property"},{"refs":[{"id":"ref-for-valdef-counter-reset-none\u2461"},{"id":"ref-for-valdef-counter-reset-none\u2462"}],"title":"4.2. \nManipulating Counter Values: the counter-increment and counter-set properties"}],"url":"#valdef-counter-reset-none"}, "valdef-counter-reset-reversed-counter-name-integer": {"dfnID":"valdef-counter-reset-reversed-counter-name-integer","dfnText":"<reversed-counter-name> <integer>?","external":false,"refSections":[],"url":"#valdef-counter-reset-reversed-counter-name-integer"}, "valdef-counter-set-counter-name-integer": {"dfnID":"valdef-counter-set-counter-name-integer","dfnText":"<counter-name> <integer>?","external":false,"refSections":[],"url":"#valdef-counter-set-counter-name-integer"}, "valdef-counter-set-none": {"dfnID":"valdef-counter-set-none","dfnText":"none","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-counter-set-none"}],"title":"4.6. \nThe Implicit list-item Counter"}],"url":"#valdef-counter-set-none"}, "valdef-list-style-image-image": {"dfnID":"valdef-list-style-image-image","dfnText":"<image>","external":false,"refSections":[],"url":"#valdef-list-style-image-image"}, "valdef-list-style-image-none": {"dfnID":"valdef-list-style-image-none","dfnText":"none","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-list-style-image-none"}],"title":"3.3. \nImage Markers: the list-style-image property"}],"url":"#valdef-list-style-image-none"}, "valdef-list-style-position-inside": {"dfnID":"valdef-list-style-position-inside","dfnText":"inside","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-list-style-position-inside"}],"title":"3.5. \nPositioning Markers: The list-style-position property"}],"url":"#valdef-list-style-position-inside"}, "valdef-list-style-type-counter-style": {"dfnID":"valdef-list-style-type-counter-style","dfnText":"<counter-style>","external":false,"refSections":[],"url":"#valdef-list-style-type-counter-style"}, "valdef-list-style-type-none": {"dfnID":"valdef-list-style-type-none","dfnText":"none","external":false,"refSections":[],"url":"#valdef-list-style-type-none"}, "valdef-list-style-type-string": {"dfnID":"valdef-list-style-type-string","dfnText":"<string>","external":false,"refSections":[],"url":"#valdef-list-style-type-string"}, "valdef-marker-side-match-parent": {"dfnID":"valdef-marker-side-match-parent","dfnText":"match-parent","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-marker-side-match-parent"}],"title":"3.7. \nThe marker-side property"}],"url":"#valdef-marker-side-match-parent"}, "valdef-marker-side-match-self": {"dfnID":"valdef-marker-side-match-self","dfnText":"match-self","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-marker-side-match-self"}],"title":"3.7. \nThe marker-side property"}],"url":"#valdef-marker-side-match-self"}, }; document.addEventListener("DOMContentLoaded", ()=>{ genAllDfnPanels(); document.body.addEventListener("click", (e) => { // If not handled already, just hide all dfn panels. hideAllDfnPanels(); }); }); window.addEventListener("resize", () => { // Pin any visible dfn panel queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(el=>positionDfnPanel(el)); }); function genAllDfnPanels() { for(const panelData of Object.values(dfnPanelData)) { const dfnID = panelData.dfnID; const dfn = document.getElementById(dfnID); if(!dfn) { console.log(`Can't find dfn#${dfnID}.`, panelData); continue; } dfn.panelData = panelData; insertDfnPopupAction(dfn); } } function genDfnPanel(dfn, { dfnID, url, dfnText, refSections, external }) { const dfnPanel = mk.aside({ class: "dfn-panel on", id: `infopanel-for-${dfnID}`, "data-for": dfnID, "aria-labelled-by":`infopaneltitle-for-${dfnID}`, }, mk.span({id:`infopaneltitle-for-${dfnID}`, style:"display:none"}, `Info about the '${dfnText}' ${external?"external":""} reference.`), mk.a({href:url, class:"dfn-link"}, url), refSections.length == 0 ? [] : mk.b({}, "Referenced in:"), mk.ul({}, ...refSections.map(section=> mk.li({}, ...section.refs.map((ref, refI)=> [ mk.a({ href: `#${ref.id}` }, (refI == 0) ? section.title : `(${refI + 1})` ), " ", ] ), ), ), ), genLinkingSyntaxes(dfn), ); dfnPanel.addEventListener('click', (event) => { if (event.target.nodeName == 'A') { scrollToTargetAndHighlight(event); pinDfnPanel(dfnPanel); } event.stopPropagation(); refocusOnTarget(event); }); dfnPanel.addEventListener('keydown', (event) => { if(event.keyCode == 27) { // Escape key hideDfnPanel({dfnPanel}); event.stopPropagation(); event.preventDefault(); } }); dfnPanel.dfn = dfn; dfn.dfnPanel = dfnPanel; return dfnPanel; } function hideAllDfnPanels() { // Delete the currently-active dfn panel. queryAll(".dfn-panel").forEach(dfnPanel=>hideDfnPanel({dfnPanel})); } function showDfnPanel(dfn) { hideAllDfnPanels(); // Only display one at a time. dfn.setAttribute("aria-expanded", "true"); const dfnPanel = genDfnPanel(dfn, dfn.panelData); // Give the dfn a unique tabindex, and then // give all the tabbable panel bits successive indexes. let tabIndex = 100; dfn.tabIndex = tabIndex++; const tabbable = dfnPanel.querySelectorAll(":is(a, button)"); for (const el of tabbable) { el.tabIndex = tabIndex++; } append(document.body, dfnPanel); positionDfnPanel(dfnPanel); } function positionDfnPanel(dfnPanel) { const dfn = dfnPanel.dfn; const dfnPos = getBounds(dfn); dfnPanel.style.top = dfnPos.bottom + "px"; dfnPanel.style.left = dfnPos.left + "px"; const panelPos = dfnPanel.getBoundingClientRect(); const panelMargin = 8; const maxRight = document.body.parentNode.clientWidth - panelMargin; if (panelPos.right > maxRight) { const overflowAmount = panelPos.right - maxRight; const newLeft = Math.max(panelMargin, dfnPos.left - overflowAmount); dfnPanel.style.left = newLeft + "px"; } } function pinDfnPanel(dfnPanel) { // Switch it to "activated" state, which pins it. dfnPanel.classList.add("activated"); dfnPanel.style.position = "fixed"; dfnPanel.style.left = null; dfnPanel.style.top = null; } function hideDfnPanel({dfn, dfnPanel}) { if(!dfnPanel) dfnPanel = dfn.dfnPanel; if(!dfn) dfn = dfnPanel.dfn; dfn.dfnPanel = undefined; dfnPanel.dfn = undefined; dfn.setAttribute("aria-expanded", "false"); dfn.tabIndex = undefined; dfnPanel.remove() } function toggleDfnPanel(dfn) { if(dfn.dfnPanel) { hideDfnPanel(dfn); } else { showDfnPanel(dfn); } } function insertDfnPopupAction(dfn) { dfn.setAttribute('role', 'button'); dfn.setAttribute('aria-expanded', 'false') dfn.tabIndex = 0; dfn.classList.add('has-dfn-panel'); dfn.addEventListener('click', (event) => { toggleDfnPanel(dfn); event.stopPropagation(); }); dfn.addEventListener('keypress', (event) => { const kc = event.keyCode; // 32->Space, 13->Enter if(kc == 32 || kc == 13) { toggleDfnPanel(dfn); event.stopPropagation(); event.preventDefault(); } }); } function refocusOnTarget(event) { const target = event.target; setTimeout(() => { // Refocus on the event.target element. // This is needed after browser scrolls to the destination. target.focus(); }); } // TODO: shared util // Returns the root-level absolute position {left and top} of element. function getBounds(el, relativeTo=document.body) { const relativeRect = relativeTo.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const top = elRect.top - relativeRect.top; const left = elRect.left - relativeRect.left; return { top, left, bottom: top + elRect.height, right: left + elRect.width, } } function scrollToTargetAndHighlight(event) { let hash = event.target.hash; if (hash) { hash = decodeURIComponent(hash.substring(1)); const dest = document.getElementById(hash); if (dest) { dest.classList.add('highlighted'); setTimeout(() => dest.classList.remove('highlighted'), 1000); } } } // Functions, divided by link type, that wrap an autolink's // contents with the appropriate outer syntax. // Alternately, a string naming another type they format // the same as. function needsFor(type) { switch(type) { case "descriptor": case "value": case "element-attr": case "attr-value": case "element-state": case "method": case "constructor": case "argument": case "attribute": case "const": case "dict-member": case "event": case "enum-value": case "stringifier": case "serializer": case "iterator": case "maplike": case "setlike": case "state": case "mode": case "context": case "facet": return true; default: return false; } } function refusesFor(type) { switch(type) { case "property": case "element": case "interface": case "namespace": case "callback": case "dictionary": case "enum": case "exception": case "typedef": case "http-header": case "permission": return true; default: return false; } } function linkFormatterFromType(type) { switch(type) { case 'scheme': case 'permission': case 'dfn': return (text) => `[=${text}=]`; case 'abstract-op': return (text) => `[\$${text}\$]`; case 'function': case 'at-rule': case 'selector': case 'value': return (text) => `''${text}''`; case 'http-header': return (text) => `[:${text}:]`; case 'interface': case 'constructor': case 'method': case 'argument': case 'attribute': case 'callback': case 'dictionary': case 'dict-member': case 'enum': case 'enum-value': case 'exception': case 'const': case 'typedef': case 'stringifier': case 'serializer': case 'iterator': case 'maplike': case 'setlike': case 'extended-attribute': case 'event': case 'idl': return (text) => `{{${text}}}`; case 'element-state': case 'element-attr': case 'attr-value': case 'element': return (element) => `<{${element}}>`; case 'grammar': return (text) => `${text} (within a <pre class=prod>)`; case 'type': return (text)=> `<<${text}>>`; case 'descriptor': case 'property': return (text) => `'${text}'`; default: return; }; }; function genLinkingSyntaxes(dfn) { if(dfn.tagName != "DFN") return; const type = dfn.getAttribute('data-dfn-type'); if(!type) { console.log(`<dfn> doesn't have a data-dfn-type:`, dfn); return []; } // Return a function that wraps link text based on the type const linkFormatter = linkFormatterFromType(type); if(!linkFormatter) { console.log(`<dfn> has an unknown data-dfn-type:`, dfn); return []; } let ltAlts; if(dfn.hasAttribute('data-lt')) { ltAlts = dfn.getAttribute('data-lt') .split("|") .map(x=>x.trim()); } else { ltAlts = [dfn.textContent.trim()]; } if(type == "type") { // lt of "<foo>", but "foo" is the interior; // <<foo/bar>> is how you write it with a for, // not <foo/<bar>> or whatever. for(var i = 0; i < ltAlts.length; i++) { const lt = ltAlts[i]; const match = /<(.*)>/.exec(lt); if(match) { ltAlts[i] = match[1]; } } } let forAlts; if(dfn.hasAttribute('data-dfn-for')) { forAlts = dfn.getAttribute('data-dfn-for') .split(",") .map(x=>x.trim()); } else { forAlts = ['']; } let linkingSyntaxes = []; if(!needsFor(type)) { for(const lt of ltAlts) { linkingSyntaxes.push(linkFormatter(lt)); } } if(!refusesFor(type)) { for(const f of forAlts) { linkingSyntaxes.push(linkFormatter(`${f}/${ltAlts[0]}`)) } } return [ mk.b({}, 'Possible linking syntaxes:'), mk.ul({}, ...linkingSyntaxes.map(link => { const copyLink = async () => await navigator.clipboard.writeText(link); return mk.li({}, mk.div({ class: 'link-item' }, mk.button({ class: 'copy-icon', title: 'Copy', type: 'button', _onclick: copyLink, tabindex: 0, }, mk.span({ class: 'icon' }) ), mk.span({}, link) ) ); }) ) ]; } } </script> <script>/* Boilerplate: script-link-titles */ "use strict"; { let linkTitleData = { "https://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style": "Expands to: cjk-ideographic | japanese-formal | japanese-informal | simp-chinese-formal | simp-chinese-informal | trad-chinese-formal | trad-chinese-informal", }; function setTypeTitles() { for(let el of document.querySelectorAll("a[href]")) { if(el.href in linkTitleData && !el.hasAttribute("title")) { el.setAttribute("title", linkTitleData[el.href]); } } } document.addEventListener("DOMContentLoaded", setTypeTitles); } </script> <script>/* Boilerplate: script-position-annos */ "use strict"; { function repositionAnnoPanels(){ const panels = [...document.querySelectorAll("[data-anno-for]")]; hydratePanels(panels); let vSoFar = 0; for(const panel of panels.sort(cmpTops)) { if(panel.top < vSoFar) { panel.top = vSoFar; panel.style.top = vSoFar + "px"; } vSoFar = panel.top + panel.height + 15; } } function hydratePanels(panels) { const main = document.querySelector("main"); let mainRect; if(main) mainRect = main.getBoundingClientRect(); // First display them all, if they're not already visible. for(const panel of panels) { panel.classList.remove("unpositioned"); } // Measure them all for(const panel of panels) { const dfn = document.getElementById(panel.getAttribute("data-anno-for")); if(!dfn) { console.log("Can't find the annotation panel target:", panel); continue; } panel.dfn = dfn; panel.top = window.scrollY + dfn.getBoundingClientRect().top; let panelRect = panel.getBoundingClientRect(); panel.height = panelRect.height; if(main) { panel.overlappingMain = panelRect.left < mainRect.right; } else { panel.overlappingMain = false; } } // And finally position them for(const panel of panels) { const dfn = panel.dfn; if(!dfn) continue; panel.style.top = panel.top + "px"; panel.classList.toggle("overlapping-main", panel.overlappingMain); } } function cmpTops(a,b) { return a.top - b.top; } window.addEventListener("load", repositionAnnoPanels); window.addEventListener("resize", repositionAnnoPanels); } </script> <script>/* Boilerplate: script-ref-hints */ "use strict"; { let refsData = { "#counter": {"displayText":"counter","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"local","text":"counter","type":"dfn","url":"#counter"}, "#counter-scope": {"displayText":"scope","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"local","text":"scope","type":"dfn","url":"#counter-scope"}, "#css-counter-creator": {"displayText":"creator","export":true,"for_":["CSS counter"],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"local","text":"creator","type":"dfn","url":"#css-counter-creator"}, "#css-counter-reversed": {"displayText":"reversed","export":true,"for_":["CSS counter"],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"local","text":"reversed","type":"dfn","url":"#css-counter-reversed"}, "#css-counters-set": {"displayText":"css counters set","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"local","text":"css counters set","type":"dfn","url":"#css-counters-set"}, "#funcdef-counter": {"displayText":"counter()","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"local","text":"counter()","type":"function","url":"#funcdef-counter"}, "#funcdef-counters": {"displayText":"counters()","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"local","text":"counters()","type":"function","url":"#funcdef-counters"}, "#inherit-counters": {"displayText":"inherit counters","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"local","text":"inherit counters","type":"dfn","url":"#inherit-counters"}, "#innermost": {"displayText":"innermost","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"local","text":"innermost","type":"dfn","url":"#innermost"}, "#instantiate-counter": {"displayText":"instantiate","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"local","text":"instantiate","type":"dfn","url":"#instantiate-counter"}, "#list-item": {"displayText":"list item","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"local","text":"list item","type":"dfn","url":"#list-item"}, "#list-style-position-outside": {"displayText":"outside","export":true,"for_":["list-style-position"],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"local","text":"outside","type":"value","url":"#list-style-position-outside"}, "#marker": {"displayText":"marker","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"local","text":"marker","type":"dfn","url":"#marker"}, "#marker-image": {"displayText":"marker image","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"local","text":"marker image","type":"dfn","url":"#marker-image"}, "#marker-string": {"displayText":"marker string","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"local","text":"marker string","type":"dfn","url":"#marker-string"}, "#propdef-counter-increment": {"displayText":"counter-increment","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"local","text":"counter-increment","type":"property","url":"#propdef-counter-increment"}, "#propdef-counter-reset": {"displayText":"counter-reset","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"local","text":"counter-reset","type":"property","url":"#propdef-counter-reset"}, "#propdef-counter-set": {"displayText":"counter-set","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"local","text":"counter-set","type":"property","url":"#propdef-counter-set"}, "#propdef-list-style": {"displayText":"list-style","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"local","text":"list-style","type":"property","url":"#propdef-list-style"}, "#propdef-list-style-image": {"displayText":"list-style-image","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"local","text":"list-style-image","type":"property","url":"#propdef-list-style-image"}, "#propdef-list-style-position": {"displayText":"list-style-position","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"local","text":"list-style-position","type":"property","url":"#propdef-list-style-position"}, "#propdef-list-style-type": {"displayText":"list-style-type","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"local","text":"list-style-type","type":"property","url":"#propdef-list-style-type"}, "#propdef-marker-side": {"displayText":"marker-side","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"local","text":"marker-side","type":"property","url":"#propdef-marker-side"}, "#typedef-counter": {"displayText":"<counter>","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"local","text":"<counter>","type":"type","url":"#typedef-counter"}, "#typedef-counter-name": {"displayText":"<counter-name>","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"local","text":"<counter-name>","type":"type","url":"#typedef-counter-name"}, "#typedef-reversed-counter-name": {"displayText":"<reversed-counter-name>","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"local","text":"<reversed-counter-name>","type":"type","url":"#typedef-reversed-counter-name"}, "#valdef-counter-increment-list-item": {"displayText":"list-item","export":true,"for_":["counter()","counter-increment","counter-reset","counter-set","counters()"],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"local","text":"list-item","type":"value","url":"#valdef-counter-increment-list-item"}, "#valdef-counter-reset-none": {"displayText":"none","export":true,"for_":["counter-reset"],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"local","text":"none","type":"value","url":"#valdef-counter-reset-none"}, "#valdef-counter-set-none": {"displayText":"none","export":true,"for_":["counter-increment","counter-set"],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"local","text":"none","type":"value","url":"#valdef-counter-set-none"}, "#valdef-list-style-image-none": {"displayText":"none","export":true,"for_":["list-style-image"],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"local","text":"none","type":"value","url":"#valdef-list-style-image-none"}, "#valdef-list-style-position-inside": {"displayText":"inside","export":true,"for_":["list-style-position"],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"local","text":"inside","type":"value","url":"#valdef-list-style-position-inside"}, "#valdef-marker-side-match-parent": {"displayText":"match-parent","export":true,"for_":["marker-side"],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"local","text":"match-parent","type":"value","url":"#valdef-marker-side-match-parent"}, "#valdef-marker-side-match-self": {"displayText":"match-self","export":true,"for_":["marker-side"],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"local","text":"match-self","type":"value","url":"#valdef-marker-side-match-self"}, "https://dom.spec.whatwg.org/#concept-tree-order": {"displayText":"tree order","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"tree order","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-tree-order"}, "https://dom.spec.whatwg.org/#concept-tree-root": {"displayText":"root","export":true,"for_":["tree"],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"root","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-tree-root"}, "https://drafts.csswg.org/css-cascade-5/#cascade-origin-author": {"displayText":"author origin","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"author origin","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#cascade-origin-author"}, "https://drafts.csswg.org/css-cascade-5/#cascade-origin-ua": {"displayText":"user-agent origin","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"user-agent origin","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#cascade-origin-ua"}, "https://drafts.csswg.org/css-cascade-5/#cascade-origin-user": {"displayText":"user origin","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"user origin","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#cascade-origin-user"}, "https://drafts.csswg.org/css-cascade-5/#computed-value": {"displayText":"computed value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"computed value","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#computed-value"}, "https://drafts.csswg.org/css-cascade-5/#css-inheritance": {"displayText":"inheritance","export":true,"for_":["CSS"],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"inheritance","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#css-inheritance"}, "https://drafts.csswg.org/css-cascade-5/#specified-value": {"displayText":"specified value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"specified value","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#specified-value"}, "https://drafts.csswg.org/css-cascade-5/#used-value": {"displayText":"used value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"used value","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#used-value"}, "https://drafts.csswg.org/css-cascade-6/#cascade": {"displayText":"cascade","export":true,"for_":[],"level":"6","normative":true,"shortname":"css-cascade","spec":"css-cascade-6","status":"current","text":"cascade","type":"dfn","url":"https://drafts.csswg.org/css-cascade-6/#cascade"}, "https://drafts.csswg.org/css-color-4/#propdef-color": {"displayText":"color","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"current","text":"color","type":"property","url":"https://drafts.csswg.org/css-color-4/#propdef-color"}, "https://drafts.csswg.org/css-content-3/#propdef-content": {"displayText":"content","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-content","spec":"css-content-3","status":"current","text":"content","type":"property","url":"https://drafts.csswg.org/css-content-3/#propdef-content"}, "https://drafts.csswg.org/css-content-3/#valdef-content-none": {"displayText":"none","export":true,"for_":["content"],"level":"3","normative":true,"shortname":"css-content","spec":"css-content-3","status":"current","text":"none","type":"value","url":"https://drafts.csswg.org/css-content-3/#valdef-content-none"}, "https://drafts.csswg.org/css-content-3/#valdef-content-normal": {"displayText":"normal","export":true,"for_":["content"],"level":"3","normative":true,"shortname":"css-content","spec":"css-content-3","status":"current","text":"normal","type":"value","url":"https://drafts.csswg.org/css-content-3/#valdef-content-normal"}, "https://drafts.csswg.org/css-counter-styles-3/#counter-style": {"displayText":"counter style","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-counter-styles","spec":"css-counter-styles-3","status":"current","text":"counter style","type":"dfn","url":"https://drafts.csswg.org/css-counter-styles-3/#counter-style"}, "https://drafts.csswg.org/css-counter-styles-3/#decimal": {"displayText":"decimal","export":true,"for_":["<counter-style-name>"],"level":"3","normative":true,"shortname":"css-counter-styles","spec":"css-counter-styles-3","status":"current","text":"decimal","type":"value","url":"https://drafts.csswg.org/css-counter-styles-3/#decimal"}, "https://drafts.csswg.org/css-counter-styles-3/#descdef-counter-style-prefix": {"displayText":"prefix","export":true,"for_":["@counter-style"],"level":"3","normative":true,"shortname":"css-counter-styles","spec":"css-counter-styles-3","status":"current","text":"prefix","type":"descriptor","url":"https://drafts.csswg.org/css-counter-styles-3/#descdef-counter-style-prefix"}, "https://drafts.csswg.org/css-counter-styles-3/#descdef-counter-style-suffix": {"displayText":"suffix","export":true,"for_":["@counter-style"],"level":"3","normative":true,"shortname":"css-counter-styles","spec":"css-counter-styles-3","status":"current","text":"suffix","type":"descriptor","url":"https://drafts.csswg.org/css-counter-styles-3/#descdef-counter-style-suffix"}, "https://drafts.csswg.org/css-counter-styles-3/#disc": {"displayText":"disc","export":true,"for_":["<counter-style-name>"],"level":"3","normative":true,"shortname":"css-counter-styles","spec":"css-counter-styles-3","status":"current","text":"disc","type":"value","url":"https://drafts.csswg.org/css-counter-styles-3/#disc"}, "https://drafts.csswg.org/css-counter-styles-3/#generate-a-counter": {"displayText":"generate a counter representation","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-counter-styles","spec":"css-counter-styles-3","status":"current","text":"generate a counter representation","type":"dfn","url":"https://drafts.csswg.org/css-counter-styles-3/#generate-a-counter"}, "https://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style": {"displayText":"<counter-style>","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-counter-styles","spec":"css-counter-styles-3","status":"current","text":"<counter-style>","type":"type","url":"https://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style"}, "https://drafts.csswg.org/css-display-4/#anonymous": {"displayText":"anonymous","export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"anonymous","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#anonymous"}, "https://drafts.csswg.org/css-display-4/#block-container": {"displayText":"block container","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"block container","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#block-container"}, "https://drafts.csswg.org/css-display-4/#css-text-sequence": {"displayText":"text sequence","export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"text sequence","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#css-text-sequence"}, "https://drafts.csswg.org/css-display-4/#display-type": {"displayText":"display type","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"display type","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#display-type"}, "https://drafts.csswg.org/css-display-4/#inline": {"displayText":"inline","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"inline","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#inline"}, "https://drafts.csswg.org/css-display-4/#inline-box": {"displayText":"inline box","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"inline box","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#inline-box"}, "https://drafts.csswg.org/css-display-4/#inline-level": {"displayText":"inline-level","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"inline-level","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#inline-level"}, "https://drafts.csswg.org/css-display-4/#outer-display-type": {"displayText":"outer display type","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"outer display type","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#outer-display-type"}, "https://drafts.csswg.org/css-display-4/#principal-box": {"displayText":"principal box","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"principal box","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#principal-box"}, "https://drafts.csswg.org/css-display-4/#propdef-display": {"displayText":"display","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"display","type":"property","url":"https://drafts.csswg.org/css-display-4/#propdef-display"}, "https://drafts.csswg.org/css-display-4/#propdef-order": {"displayText":"order","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"order","type":"property","url":"https://drafts.csswg.org/css-display-4/#propdef-order"}, "https://drafts.csswg.org/css-display-4/#propdef-visibility": {"displayText":"visibility","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"visibility","type":"property","url":"https://drafts.csswg.org/css-display-4/#propdef-visibility"}, "https://drafts.csswg.org/css-display-4/#replaced-element": {"displayText":"replaced element","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"replaced element","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#replaced-element"}, "https://drafts.csswg.org/css-display-4/#valdef-display-list-item": {"displayText":"list-item","export":true,"for_":["display","<display-list-item>"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"list-item","type":"value","url":"https://drafts.csswg.org/css-display-4/#valdef-display-list-item"}, "https://drafts.csswg.org/css-display-4/#valdef-display-none": {"displayText":"none","export":true,"for_":["display","<display-box>"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"none","type":"value","url":"https://drafts.csswg.org/css-display-4/#valdef-display-none"}, "https://drafts.csswg.org/css-display-4/#valdef-visibility-hidden": {"displayText":"hidden","export":true,"for_":["visibility"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"hidden","type":"value","url":"https://drafts.csswg.org/css-display-4/#valdef-visibility-hidden"}, "https://drafts.csswg.org/css-images-3/#default-object-size": {"displayText":"default object size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-images","spec":"css-images-3","status":"current","text":"default object size","type":"dfn","url":"https://drafts.csswg.org/css-images-3/#default-object-size"}, "https://drafts.csswg.org/css-images-3/#default-sizing-algorithm": {"displayText":"default sizing algorithm","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-images","spec":"css-images-3","status":"current","text":"default sizing algorithm","type":"dfn","url":"https://drafts.csswg.org/css-images-3/#default-sizing-algorithm"}, "https://drafts.csswg.org/css-images-3/#specified-size": {"displayText":"specified size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-images","spec":"css-images-3","status":"current","text":"specified size","type":"dfn","url":"https://drafts.csswg.org/css-images-3/#specified-size"}, "https://drafts.csswg.org/css-images-3/#typedef-image": {"displayText":"<image>","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-images","spec":"css-images-3","status":"current","text":"<image>","type":"type","url":"https://drafts.csswg.org/css-images-3/#typedef-image"}, "https://drafts.csswg.org/css-images-4/#invalid-image": {"displayText":"valid image","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-images","spec":"css-images-4","status":"current","text":"valid image","type":"dfn","url":"https://drafts.csswg.org/css-images-4/#invalid-image"}, "https://drafts.csswg.org/css-overflow-3/#propdef-overflow": {"displayText":"overflow","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"overflow","type":"property","url":"https://drafts.csswg.org/css-overflow-3/#propdef-overflow"}, "https://drafts.csswg.org/css-overflow-3/#valdef-overflow-visible": {"displayText":"visible","export":true,"for_":["overflow","overflow-x","overflow-y"],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"visible","type":"value","url":"https://drafts.csswg.org/css-overflow-3/#valdef-overflow-visible"}, "https://drafts.csswg.org/css-position-3/#propdef-position": {"displayText":"position","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"position","type":"property","url":"https://drafts.csswg.org/css-position-3/#propdef-position"}, "https://drafts.csswg.org/css-pseudo-4/#selectordef-after": {"displayText":"::after","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-pseudo","spec":"css-pseudo-4","status":"current","text":"::after","type":"selector","url":"https://drafts.csswg.org/css-pseudo-4/#selectordef-after"}, "https://drafts.csswg.org/css-pseudo-4/#selectordef-before": {"displayText":"::before","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-pseudo","spec":"css-pseudo-4","status":"current","text":"::before","type":"selector","url":"https://drafts.csswg.org/css-pseudo-4/#selectordef-before"}, "https://drafts.csswg.org/css-pseudo-4/#selectordef-marker": {"displayText":"::marker","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-pseudo","spec":"css-pseudo-4","status":"current","text":"::marker","type":"selector","url":"https://drafts.csswg.org/css-pseudo-4/#selectordef-marker"}, "https://drafts.csswg.org/css-syntax-3/#css-invalid": {"displayText":"invalid","export":true,"for_":["css"],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"current","text":"invalid","type":"dfn","url":"https://drafts.csswg.org/css-syntax-3/#css-invalid"}, "https://drafts.csswg.org/css-text-4/#forced-line-break": {"displayText":"forced line break","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"current","text":"forced line break","type":"dfn","url":"https://drafts.csswg.org/css-text-4/#forced-line-break"}, "https://drafts.csswg.org/css-text-4/#propdef-letter-spacing": {"displayText":"letter-spacing","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"current","text":"letter-spacing","type":"property","url":"https://drafts.csswg.org/css-text-4/#propdef-letter-spacing"}, "https://drafts.csswg.org/css-text-4/#propdef-text-transform": {"displayText":"text-transform","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"current","text":"text-transform","type":"property","url":"https://drafts.csswg.org/css-text-4/#propdef-text-transform"}, "https://drafts.csswg.org/css-text-4/#propdef-white-space": {"displayText":"white-space","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"current","text":"white-space","type":"property","url":"https://drafts.csswg.org/css-text-4/#propdef-white-space"}, "https://drafts.csswg.org/css-text-4/#propdef-word-spacing": {"displayText":"word-spacing","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"current","text":"word-spacing","type":"property","url":"https://drafts.csswg.org/css-text-4/#propdef-word-spacing"}, "https://drafts.csswg.org/css-values-4/#comb-any": {"displayText":"||","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"||","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#comb-any"}, "https://drafts.csswg.org/css-values-4/#comb-comma": {"displayText":",","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":",","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#comb-comma"}, "https://drafts.csswg.org/css-values-4/#comb-one": {"displayText":"|","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"|","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#comb-one"}, "https://drafts.csswg.org/css-values-4/#css-wide-keywords": {"displayText":"CSS-wide keywords","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"css-wide keywords","type":"dfn","url":"https://drafts.csswg.org/css-values-4/#css-wide-keywords"}, "https://drafts.csswg.org/css-values-4/#funcdef-calc": {"displayText":"calc()","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"calc()","type":"function","url":"https://drafts.csswg.org/css-values-4/#funcdef-calc"}, "https://drafts.csswg.org/css-values-4/#functional-notation": {"displayText":"functional notation","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"functional notation","type":"dfn","url":"https://drafts.csswg.org/css-values-4/#functional-notation"}, "https://drafts.csswg.org/css-values-4/#identifier-value": {"displayText":"<custom-ident>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<custom-ident>","type":"type","url":"https://drafts.csswg.org/css-values-4/#identifier-value"}, "https://drafts.csswg.org/css-values-4/#integer-value": {"displayText":"<integer>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<integer>","type":"type","url":"https://drafts.csswg.org/css-values-4/#integer-value"}, "https://drafts.csswg.org/css-values-4/#mult-one-plus": {"displayText":"+","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"+","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#mult-one-plus"}, "https://drafts.csswg.org/css-values-4/#mult-opt": {"displayText":"?","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"?","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#mult-opt"}, "https://drafts.csswg.org/css-values-4/#string-value": {"displayText":"<string>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<string>","type":"type","url":"https://drafts.csswg.org/css-values-4/#string-value"}, "https://drafts.csswg.org/css-variables-2/#custom-property": {"displayText":"custom property","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-variables","spec":"css-variables-2","status":"current","text":"custom property","type":"dfn","url":"https://drafts.csswg.org/css-variables-2/#custom-property"}, "https://drafts.csswg.org/css-writing-modes-3/#propdef-direction": {"displayText":"direction","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"current","text":"direction","type":"property","url":"https://drafts.csswg.org/css-writing-modes-3/#propdef-direction"}, "https://drafts.csswg.org/css-writing-modes-3/#propdef-unicode-bidi": {"displayText":"unicode-bidi","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"current","text":"unicode-bidi","type":"property","url":"https://drafts.csswg.org/css-writing-modes-3/#propdef-unicode-bidi"}, "https://drafts.csswg.org/css-writing-modes-4/#inline-start": {"displayText":"inline-start","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"inline-start","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#inline-start"}, "https://drafts.csswg.org/css-writing-modes-4/#propdef-text-combine-upright": {"displayText":"text-combine-upright","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"text-combine-upright","type":"property","url":"https://drafts.csswg.org/css-writing-modes-4/#propdef-text-combine-upright"}, "https://drafts.csswg.org/css-writing-modes-4/#writing-mode": {"displayText":"writing mode","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"writing mode","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#writing-mode"}, "https://drafts.csswg.org/selectors-4/#compound": {"displayText":"compound selector","export":true,"for_":[],"level":"4","normative":true,"shortname":"selectors","spec":"selectors-4","status":"current","text":"compound selector","type":"dfn","url":"https://drafts.csswg.org/selectors-4/#compound"}, "https://drafts.csswg.org/selectors-4/#originating-element": {"displayText":"originating element","export":true,"for_":[],"level":"4","normative":true,"shortname":"selectors","spec":"selectors-4","status":"current","text":"originating element","type":"dfn","url":"https://drafts.csswg.org/selectors-4/#originating-element"}, "https://drafts.csswg.org/selectors-4/#pseudo-element": {"displayText":"pseudo-element","export":true,"for_":[],"level":"4","normative":true,"shortname":"selectors","spec":"selectors-4","status":"current","text":"pseudo-element","type":"dfn","url":"https://drafts.csswg.org/selectors-4/#pseudo-element"}, "https://drafts.csswg.org/selectors-4/#selector": {"displayText":"selector","export":true,"for_":[],"level":"4","normative":true,"shortname":"selectors","spec":"selectors-4","status":"current","text":"selector","type":"dfn","url":"https://drafts.csswg.org/selectors-4/#selector"}, "https://html.spec.whatwg.org/multipage/form-elements.html#the-option-element": {"displayText":"option","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"option","type":"element","url":"https://html.spec.whatwg.org/multipage/form-elements.html#the-option-element"}, "https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element": {"displayText":"li","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"li","type":"element","url":"https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element"}, "https://html.spec.whatwg.org/multipage/grouping-content.html#the-ol-element": {"displayText":"ol","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"ol","type":"element","url":"https://html.spec.whatwg.org/multipage/grouping-content.html#the-ol-element"}, "https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element": {"displayText":"ul","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"ul","type":"element","url":"https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element"}, "https://infra.spec.whatwg.org/#list-contain": {"displayText":"contain","export":true,"for_":["list","stack","queue","set"],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"contain","type":"dfn","url":"https://infra.spec.whatwg.org/#list-contain"}, "https://infra.spec.whatwg.org/#list-remove": {"displayText":"remove","export":true,"for_":["list","set"],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"remove","type":"dfn","url":"https://infra.spec.whatwg.org/#list-remove"}, "https://infra.spec.whatwg.org/#map-iterate": {"displayText":"for each","export":true,"for_":["map"],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"for each","type":"dfn","url":"https://infra.spec.whatwg.org/#map-iterate"}, "https://infra.spec.whatwg.org/#ordered-set": {"displayText":"set","export":true,"for_":[],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"set","type":"dfn","url":"https://infra.spec.whatwg.org/#ordered-set"}, "https://infra.spec.whatwg.org/#set-append": {"displayText":"append","export":true,"for_":["set"],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"append","type":"dfn","url":"https://infra.spec.whatwg.org/#set-append"}, "https://infra.spec.whatwg.org/#string": {"displayText":"string","export":true,"for_":[],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"string","type":"dfn","url":"https://infra.spec.whatwg.org/#string"}, "https://infra.spec.whatwg.org/#tuple": {"displayText":"tuple","export":true,"for_":[],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"tuple","type":"dfn","url":"https://infra.spec.whatwg.org/#tuple"}, "https://svgwg.org/svg2-draft/shapes.html#elementdef-rect": {"displayText":"rect","export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"current","text":"rect","type":"element","url":"https://svgwg.org/svg2-draft/shapes.html#elementdef-rect"}, }; function mkRefHint(link, ref) { const linkText = link.textContent; let dfnTextElements = ''; if (ref.displayText.toLowerCase() != linkText.toLowerCase()) { // Give the original term if it's being displayed in a different way. // But allow casing differences, they're insignificant. dfnTextElements = mk.li({}, mk.b({}, "Term: "), mk.span({}, ref.displayText) ); } const forList = ref.for_; let forListElements; if(forList.length == 0) { forListElements = []; } else if(forList.length == 1) { forListElements = mk.li({}, mk.b({}, "For: "), mk.span({}, forList[0]), ); } else { forListElements = mk.li({}, mk.b({}, "For: "), mk.ul({}, ...forList.map(forItem => mk.li({}, mk.span({}, forItem) ), ), ), ); } const url = ref.url; const safeUrl = encodeURIComponent(url); const hintPanel = mk.aside({ class: "ref-hint", id: `ref-hint-for-${safeUrl}`, "data-for": url, "aria-labelled-by": `ref-hint-for-${safeUrl}`, }, mk.ul({}, dfnTextElements, mk.li({}, mk.b({}, "URL: "), mk.a({ href: url, class: "ref" }, url), ), mk.li({}, mk.b({}, "Type: "), mk.span({}, `${ref.type}`), ), mk.li({}, mk.b({}, "Spec: "), mk.span({}, `${ref.spec ? ref.spec : ''}`), ), forListElements ), ); hintPanel.forLink = link; setupRefHintEventListeners(link, hintPanel); return hintPanel; } function hideAllRefHints() { queryAll(".ref-hint").forEach(el=>hideRefHint(el)); } function hideRefHint(refHint) { const link = refHint.forLink; link.setAttribute("aria-expanded", "false"); if(refHint.teardownEventListeners) { refHint.teardownEventListeners(); } refHint.remove(); } function showRefHint(link) { if(link.classList.contains("dfn-link")) return; const url = link.getAttribute("href"); const ref = refsData[url]; if(!ref) return; hideAllRefHints(); // Only display one at this time. const refHint = mkRefHint(link, ref); append(document.body, refHint); link.setAttribute("aria-expanded", "true"); positionRefHint(refHint); } function setupRefHintEventListeners(link, refHint) { if (refHint.teardownEventListeners) return; // Add event handlers to hide the refHint after the user moves away // from both the link and refHint, if not hovering either within one second. let timeout = null; const startHidingRefHint = (event) => { if (timeout) { clearTimeout(timeout); } timeout = setTimeout(() => { hideRefHint(refHint); }, 1000); } const resetHidingRefHint = (event) => { if (timeout) clearTimeout(timeout); timeout = null; }; link.addEventListener("mouseleave", startHidingRefHint); link.addEventListener("mouseenter", resetHidingRefHint); link.addEventListener("blur", startHidingRefHint); link.addEventListener("focus", resetHidingRefHint); refHint.addEventListener("mouseleave", startHidingRefHint); refHint.addEventListener("mouseenter", resetHidingRefHint); refHint.addEventListener("blur", startHidingRefHint); refHint.addEventListener("focus", resetHidingRefHint); refHint.teardownEventListeners = () => { // remove event listeners resetHidingRefHint(); link.removeEventListener("mouseleave", startHidingRefHint); link.removeEventListener("mouseenter", resetHidingRefHint); link.removeEventListener("blur", startHidingRefHint); link.removeEventListener("focus", resetHidingRefHint); refHint.removeEventListener("mouseleave", startHidingRefHint); refHint.removeEventListener("mouseenter", resetHidingRefHint); refHint.removeEventListener("blur", startHidingRefHint); refHint.removeEventListener("focus", resetHidingRefHint); }; } function positionRefHint(refHint) { const link = refHint.forLink; const linkPos = getBounds(link); refHint.style.top = linkPos.bottom + "px"; refHint.style.left = linkPos.left + "px"; const panelPos = refHint.getBoundingClientRect(); const panelMargin = 8; const maxRight = document.body.parentNode.clientWidth - panelMargin; if (panelPos.right > maxRight) { const overflowAmount = panelPos.right - maxRight; const newLeft = Math.max(panelMargin, linkPos.left - overflowAmount); refHint.style.left = newLeft + "px"; } } // TODO: shared util // Returns the root-level absolute position {left and top} of element. function getBounds(el, relativeTo=document.body) { const relativeRect = relativeTo.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const top = elRect.top - relativeRect.top; const left = elRect.left - relativeRect.left; return { top, left, bottom: top + elRect.height, right: left + elRect.width, } } function showRefHintListener(e) { // If the target isn't in a link (or is a link), // just ignore it. let link = e.target.closest("a"); if(!link) return; // If the target is in a ref-hint panel // (aka a link in the already-open one), // also just ignore it. if(link.closest(".ref-hint")) return; // Otherwise, show the panel for the link. showRefHint(link); } function hideAllHintsListener(e) { // If the click is inside a ref-hint panel, ignore it. if(e.target.closest(".ref-hint")) return; // Otherwise, close all the current panels. hideAllRefHints(); } document.addEventListener("DOMContentLoaded", () => { document.body.addEventListener("mousedown", showRefHintListener); document.body.addEventListener("focus", showRefHintListener); document.body.addEventListener("click", hideAllHintsListener); }); window.addEventListener("resize", () => { // Hide any open ref hint. hideAllRefHints(); }); } </script> <script>/* Boilerplate: script-var-click-highlighting */ "use strict"; { /* Color-choosing design: * Colors are ordered by goodness. * On clicking a var, give it the earliest color with the lowest usage in the algorithm. * On re-clicking, re-use the var's most recent color if that's not currently being used elsewhere. */ const COLOR_COUNT = 7; document.addEventListener("click", e=>{ if(e.target.nodeName == "VAR") { highlightSameAlgoVars(e.target); } }); function highlightSameAlgoVars(v) { // Find the algorithm container. let algoContainer = findAlgoContainer(v); // Not highlighting document-global vars, // too likely to be unrelated. if(algoContainer == null) return; const varName = nameFromVar(v); if(!v.hasAttribute("data-var-color")) { const newColor = chooseHighlightColor(algoContainer, v); for(const el of algoContainer.querySelectorAll("var")) { if(nameFromVar(el) == varName) { el.setAttribute("data-var-color", newColor); el.setAttribute("data-var-last-color", newColor); } } } else { for(const el of algoContainer.querySelectorAll("var")) { if(nameFromVar(el) == varName) { el.removeAttribute("data-var-color"); } } } } function findAlgoContainer(el) { while(el != document.body) { if(el.hasAttribute("data-algorithm")) return el; el = el.parentNode; } return null; } function nameFromVar(el) { return el.textContent.replace(/(\s|\xa0)+/g, " ").trim(); } function colorCountsFromContainer(container) { const namesFromColor = Array.from({length:COLOR_COUNT}, x=>new Set()); for(let v of container.querySelectorAll("var[data-var-color]")) { let color = +v.getAttribute("data-var-color"); namesFromColor[color].add(nameFromVar(v)); } return namesFromColor.map(x=>x.size); } function leastUsedColor(colors) { // Find the earliest color with the lowest count. let minCount = Infinity; let minColor = null; for(var i = 0; i < colors.length; i++) { if(colors[i] < minCount) { minColor = i; minCount = colors[i]; } } return minColor; } function chooseHighlightColor(container, v) { const colorCounts = colorCountsFromContainer(container); if(v.hasAttribute("data-var-last-color")) { let color = +v.getAttribute("data-var-last-color"); if(colorCounts[color] == 0) return color; } return leastUsedColor(colorCounts); } } </script>