When defining custom counter styles, the range
descriptor lets the author specify a range of counter values over which the style is applied. If a counter value is outside the specified range, then the fallback style will be used to construct the representation of that marker. Value of the range descriptor can be either auto or a comma separated list of lower and upper bounds specified as integers.
If value is auto, then for cyclic, numeric, and fixed system, the range will be from negative infinity to positive infinity. For alphabetic and symbolic systems, range will be from 1 to positive infinity. For additive systems, auto will result in the range 0 to positive infinity. For extends systems, the range is whatever auto will produce for the extended system.
When range is specified as integers, the value infinite
can be used to denote infinity. If infinite is specified as the first value in a range, then it is interpreted as negative infinity. If used as upper bound, it is taken as positive infinity.
Related at-rule | @counter-style |
---|---|
Initial value | auto |
Media | all |
Computed value | as specified |
Canonical order | order of appearance in the formal grammar of the values |
/* Keyword value */ range: auto; /* Range values */ range: 2 5; range: infinite 10; range: 6 infinite; range: infinite infinite; /* Multiple range values */ range: 2 5, 8 10; range: infinite 6, 10 infinite;
auto
[ [ | infinite ]{2} ]#
[ [ <integer> | infinite ]{2} ]# | auto
<ul class="list"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li>Six</li> <li>Seven</li> <li>Eight</li> <li>Nine</li> <li>Ten</li> </ul>
@counter-style range-multi-example { system: cyclic; symbols: "\25A0" "\25A1"; range: 2 4, 7 9; } .list { list-style: range-multi-example; }
The above list will display as follows:
1. One
□. Two
■. Three
□. Four
5. Five
6. Six
■. Seven
□. Eight
■. Nine
10. Ten
Specification | Status | Comment |
---|---|---|
CSS Counter Styles Level 3 The definition of 'range' in that specification. | Candidate Recommendation | Initial definition |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | No | ? | 33 | No | No | No |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | No | ? | ? | 33 | No | No | No |
list-style
, list-style-image
, list-style-position
symbols()
, the functional notation creating anonymous counter styles.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/range