CSS range Descriptor

The CSS range descriptor is used with the @counter-style at-rule to define the ranges over which the counter style is defined.

The @counter-style rule accepts a name, followed by a number of descriptors, which define the counter style. The range descriptor can be used to specify that a marker style is used only on those list items that fall within a certain range.

Here's an example of using the range descriptor.

If your browser supports the @counter-style at-rule, the above code could result in a list that looks something like this:

Possible Values

The range descriptor accepts the following values.

auto

When this value is used, 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, the range is the style’s defined range.

[ [ integer | infinite ]{2} ]#

This 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. The range is inclusive, so it contains both the lower and upper bound numbers.

The values can be either an integer or the infinite keyword.

The infinite keyword indicates that there's no limit. If infinite is the first value in a range, it represents negative infinity; if used as the second value, it represents positive infinity.

The initial value for the range descriptor is auto.

Official Specifications

The range descriptor is defined in CSS Counter Styles Level 3 (W3C Candidate Recommendation, 11 June 2015).