CSS counters() Function
counters() function enables you to display nested counters that have been generated by an element and its parent/s.
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. You can create and manipulate counters with the
counter-reset, and (CSS3 introduced)
counter-set properties. Counters have no visible effect by themselves, but they can be used with the
counter() functions, which allow the values of the counters to be displayed, in the format you specify.
A counter's value can be displayed with the
counter() (singular) function can be used to output a counter, the
counters() (plural) function can be used to output nested counters.
For example, you can use the
counters() function to output counters for nested lists. Like this:
You can display an element's counter in upper-roman, decimal, georgian, etc. You can also provide Unicode code points to specify special symbols or icons to be used as the marker representation.
counters() function has two forms:
counters(name, string) or
counters(name, string, style). The generated text is the value of all counters with the given name in scope at this pseudo-element, from outermost to innermost separated by the specified string. The counters are rendered in the indicated style (
decimal by default).
The official syntax of the
counters() function is as follows:
Below is an explanation of each of these values.
This is an identifier that specifies the name of the counter. This is the name that is used by the
counter-setproperties to create and manipulate the counter.
This is a string that is used as a separator between the numbers of the nested levels. For example a dot (
.) would be used to generate a counter that looks like this: 11.2.0.
The counter-style provides the counter style to be applied to the counter's representation.
A counter style can be defined using the
symbols()function, or one of the CSS predefined counter styles.
Here's a brief overview of each one.
@counter-styleat-rule allows you to define your own counter style for use within your lists and/or generated content. It accepts a name, followed by a number of descriptors, which define the counter style.
symbols()function is a stripped down alternative to the
@counter-styleat-rule. It provides a quick and easy way to create a counter style directly inline within the property without adding the extra code that an at-rule requires.
The Predefined Counter Styles
CSS includes a number of predefined counter styles. These are keywords that represent some of the more common counter styles.
Here's an example of using
Here's a working example:
The predefined counter styles come under four categories; Numeric, Alphabetic, Symbolic, and Longhand East Asian Counter Styles.
- Western decimal numbers (e.g., 1, 2, 3, ...).
- Decimal numbers padded by initial zeros (e.g., 01, 02, 03, ...)
- Han decimal numbers (e.g., 一, 二, 三, ...)
- Lowercase ASCII Roman numerals (e.g., i, ii, iii, ...)
- Uppercase ASCII Roman numerals (e.g., I, II, III, ...)
- Traditional uppercase Armenian numbering (e.g., Ա, Բ, Գ, ...)
- Traditional Georgian numbering (e.g., ა, ბ, გ, ...)
- Traditional Hebrew numbering (e.g., ג, ב, א, ...)
- Lowercase ASCII letters (e.g., a, b, c, ...).
- Uppercase ASCII letters (e.g., A, B, C, ...).
- Lowercase classical Greek (e.g., α, β, γ, ...)
- Dictionary-order hiragana lettering (e.g., あ, い, う, ...)
- Iroha-order hiragana lettering (e.g., い, ろ, は, ...)
- Dictionary-order katakana lettering (e.g., ア, イ, ウ, ...)
- Iroha-order katakana lettering (e.g., イ, ロ, ハ, ...)
- A filled circle, similar to U+2022 (•)
- A hollow circle, similar to U+25E6 (◦)
- A filled square, similar to U+25FE (◾)
Symbols appropriate for indicating an open or closed disclosure widget, such as when using the HTML
disclosure-openmight use the U+25B8 character (▸) and
disclosure-closedmight use the U+25BE character (▾).
Longhand East Asian Counter Styles
- Informal Japanese Kanji numbering.
- Formal Japanese Kanji numbering.
- Korean Hangul numbering.
- Informal Korean Hanja numbering.
- Forman Korean Han (Hanja) numbering.
- Simplified Chinese informal numbering.
- Simplified Chinese formal numbering.
- Traditional Chinese informal numbering.
- Traditional Chinese informal numbering.
- This is a legacy style that is the same as
- Represents the empty string (
""). No counter is displayed.
counters()function is defined in CSS Lists and Counters Module Level 3 (W3C Working Draft)
- It's also defined in CSS2 (W3C Recommendation 07 June 2011)