CSS - range

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.

Example

 

HTML
<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>
CSS
@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

Syntax  

CSS
/* 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;

Values

auto
The range depends on the counter system:
  • For cyclic, numeric, and fixed systems, the range is negative infinity to positive infinity.
  • For alphabetic and symbolic systems, the range is 1 to positive infinity.
  • For additive systems, the range is 0 to positive infinity.
  • For extends systems, the range is whatever auto would produce for the extended system; if extending a complex predefined style (§7 Complex Predefined Counter Styles), the range is the style’s defined range.
[ [ | infinite ]{2} ]#
Defines a comma-separated list of ranges. For each individual range, the first value is the lower bound and the second value is the upper bound. A range is inclusive, that means it always contains both, the lower and upper bound numbers. If infinite is used as the first value in a range, it represents negative infinity; if it is used as the second value, it represents positive infinity. The range of the counter style is the union of all the ranges defined in the list.
If the lower bound of any range is higher than the upper bound, the entire descriptor is invalid and will be ignored.

Formal syntax

CSS
<a title="Brackets" href="css/value_definition_syntax#brackets">[</a> <a title="Brackets" href="css/value_definition_syntax#brackets">[</a> <a title="" href="css/integer"><integer></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> infinite <a title="Brackets" href="css/value_definition_syntax#brackets">]</a><a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">{</a>2<a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">}</a> <a title="Brackets" href="css/value_definition_syntax#brackets">]</a><a title="Hash mark" href="css/value_definition_syntax#hash_mark_(.23)">#</a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> auto

Description  

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 valueauto
Mediaall
Computed valueas specified
Canonical orderorder of appearance in the formal grammar of the values

Browser Compatibility  

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support No support 33 (33) No support No support No support
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support No support 33 (33) No support No support No support

See Also  

Specifications  

Specification Status Comment
CSS Counter Styles Level 3
The definition of 'range' in that specification.
Candidate Recommendation Initial definition

License

© 2016 Mozilla 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

@counter-style CSS CSS Descriptor CSS Lists Reference