CSS @counter-style - Range

When creating custom counter styles, the range descriptor allows authors to define a specific range of counter values to which the style will be applied.

If a counter value falls outside this defined range, the fallback style is used to create the marker representation.

The allowed range varies depending on the counter system.

Possible Values

  • auto

    • For cyclic, ,numeric, and fixed systems the range is from negative infinity to positive infinity.

    • For alphabetic and symbolic systems range is 1 to positive infinity.

    • For additive systems range from 0 to positive infinity.

    • For extends systems range is whatever auto produces.

  • [ [ | infinite ]{2} ]#

    • A list of ranges, inclusive, contains both lower and upper bound numbers.

    • Infinite in a range represents negative infinity (if first) or positive infinity (if second).

    • Ranges are inclusive, encompassing both lower and upper bound numbers.

    • If lower bound is higher than upper bound, descriptor is invalid.

Syntax

range = [ [ <integer> | infinite ]{2} ]# | auto

CSS Range - Basic example

The following example demonstrates the usage of the range in @counter-style.

<html>
<head>
<style>
  @counter-style list-counter {
    system: cyclic;
    symbols: "*" "@";
    range: 2 5, 7 8;
   }
   ol {
    list-style: list-counter;
    color: blue;
    font-size: 20px;
   }
</style>
</head>
<body>
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
</ol>
</body>
</html>

In the above example, the first range is the list of ranges includes 2, 3, 4 and 5. The second includes 7, 8. The range is the union of these two ranges, or 2, 3, 4, 5, 7 and 8.

Advertisements