-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
182 lines (143 loc) · 5.78 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
---
title: counters()
slug: Web/CSS/counters
page-type: css-function
browser-compat: css.types.counters
---
{{CSSRef}}
The **`counters()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) enables combining markers when nesting counters. The function returns a string that concatenates the current values of the named and nested counters, if any are present, with the string provided. The third, optional parameter enables defining the list style.
The `counters()` function is generally used within [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) through the {{cssxref("content")}} property, but theoretically, it can be used wherever a [`<string>`](/en-US/docs/Web/CSS/string) value is supported.
The `counters()` function has two forms: `counters(<name>, <string>)` and `counters(<name>, <string>, <style>)`. The generated text is the value of all counters with the given `<name>`, arranged from the outermost to the innermost, and separated by the specified `<string>`. The counters are rendered in the `<style>` indicated, defaulting to `decimal` if no `<style>` is specified.
{{EmbedInteractiveExample("pages/tabbed/function-counters.html", "tabbed-standard")}}
## Syntax
```css
/* Simple usage - style defaults to decimal */
counters(countername, '.');
/* changing the counter display */
counters(countername, '-', upper-roman)
```
A [counter](/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters) has no visible effect by itself. The `counters()` function (and {{cssxref("counter", "counter()")}} function) is what makes it useful by returning developer-defined content.
### Values
The `counters()` function accepts two or three parameters. The first parameter is the `<counter-name>`. The second parameter is the concatenator `<string>`. The optional third parameter is the `<counter-style>`.
- `<counter-name>`
- : A {{cssxref("<custom-ident>")}} identifying the counters, which is the same case-sensitive name used for the {{cssxref("counter-reset")}} and {{cssxref("counter-increment")}} properties. The name cannot start with two dashes and can't be `none`, `unset`, `initial`, or `inherit`. Alternatively, for inline, single-use counters, the {{cssxref("symbols")}} function can be used instead of a named counter in [browsers that support `symbols()`](/en-US/docs/Web/CSS/symbols#browser_compatibility).
- {{cssxref("<string>")}}
- : Any number of text characters. Non-Latin characters must be encoded using their Unicode escape sequences: for example, `\000A9` represents the copyright symbol.
- `<counter-style>`
- : A counter style name or a [`symbols()`](/en-US/docs/Web/CSS/symbols) function. The counter style name can be a simple predefined style such as numeric, alphabetic, or symbolic, a complex longhand predefined style such as East Asian or Ethiopic, or another [predefined counter style](/en-US/docs/Web/CSS/CSS_counter_styles). If omitted, the counter-style defaults to decimal.
The return value is a string containing all the values of all the counters in the element's CSS counters set named `<counter-name>` in the counter style defined by `<counter-style>` (or decimal, if omitted). The return string is sorted in outermost-first to innermost-last order, joined by the `<string>` specified.
> **Note:** For information about non-concatenated counters, see the {{cssxref("counter", "counter()")}} function, which omits the `<string>` as a parameter.
### Formal syntax
{{CSSSyntax}}
## Examples
### Comparing default counter value to uppercase roman numerals
This example includes two `counters()` functions: one with `<counter-style>` set and the other defaulting to `decimal`.
#### HTML
```html
<ol>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
<li></li>
<li></li>
<li>
<ol>
<li></li>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
</ol>
</li>
</ol>
```
#### CSS
```css-nolint
ol {
counter-reset: listCounter;
}
li {
counter-increment: listCounter;
}
li::marker {
content:
counters(listCounter, ".", upper-roman) ") ";
}
li::before {
content:
counters(listCounter, ".") " == "
counters(listCounter, ".", lower-roman);
}
```
#### Result
{{EmbedLiveSample("Comparing default counter value to uppercase roman numerals", "100%", 270)}}
### Comparing decimal-leading-zero counter value to lowercase letters
This example includes three `counters()` functions, each with different `<string>` and `<counter-style>` values.
#### HTML
```html
<ol>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
<li></li>
<li></li>
<li>
<ol>
<li></li>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
</ol>
</li>
</ol>
```
#### CSS
```css-nolint
ol {
counter-reset: count;
}
li {
counter-increment: count;
}
li::marker {
content:
counters(count, "-", decimal-leading-zero) ") ";
}
li::before {
content:
counters(count, "~", upper-alpha) " == "
counters(count, "*", lower-alpha);
}
```
#### Result
{{EmbedLiveSample("Comparing decimal-leading-zero counter value to lowercase letters", "100%", 270)}}
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- [Using CSS Counters](/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters)
- {{cssxref("counter-set")}} property
- {{cssxref("counter-reset")}} property
- {{cssxref("counter-increment")}} property
- {{cssxref("@counter-style")}} at-rule
- CSS [`counter()`](/en-US/docs/Web/CSS/counter) function
- {{cssxref("::marker")}} pseudo-element
- [CSS lists and counters](/en-US/docs/Web/CSS/CSS_lists) module
- [CSS counter styles](/en-US/docs/Web/CSS/CSS_counter_styles) module
- [CSS generated content](/en-US/docs/Web/CSS/CSS_generated_content) module