OL - Numbered Lists

Details about number order.

In ordered lists, it is not possible to continue list numbering automatically from a previous list or to hide numbering of some list items. However, authors can reset the number of a list item by setting its value attribute. Numbering continues from the new value for subsequent list items. For example:

<ol>
<li value="30"> makes this list item number 30.
<li value="40"> makes this list item number 40.
<li> makes this list item number 41.
</ol>

30. makes this list item number 30.
40. makes this list item number 40.
41. makes this list item number 41.

For the OL element, possible values for the type attribute are summarized in the list below (they are case-sensitive): disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none |

Numbering systems are specified with:

decimal

Decimal numbers, beginning with 1.

decimal-leading-zero

Decimal numbers padded by initial zeros (e.g., 01, 02, 03, ..., 98, 99).

lower-roman

Lowercase roman numerals (i, ii, iii, iv, v, etc.).

upper-roman

Uppercase roman numerals (I, II, III, IV, V, etc.).

hebrew

Traditional Hebrew numbering.

georgian

Traditional Georgian numbering (an, ban, gan, ..., he, tan, in, in-an, ...).

armenian

Traditional Armenian numbering.

cjk-ideographic

Plain ideographic numbers

hiragana

a, i, u, e, o, ka, ki, ...

katakana

A, I, U, E, O, KA, KI, ...

hiragana-iroha

i, ro, ha, ni, ho, he, to, ...

katakana-iroha

I, RO, HA, NI, HO, HE, TO, ...

A user agent that does not recognize a numbering system should use 'decimal'.

Alphabetic systems are specified with:

lower-latin or lower-alpha

Lowercase ascii letters (a, b, c, ... z).

upper-latin or upper-alpha

Uppercase ascii letters (A, B, C, ... Z).

lower-greek

Lowercase classical Greek alpha, beta, gamma, ... (έ, ή, ί, ...)

This specification does not define how alphabetic systems wrap at the end of the alphabet. For instance, after 26 list items, 'lower-latin' rendering is undefined. Therefore, for long lists, we recommend that authors specify true numbers.

     <STYLE type="text/css">
          OL.upper { list-style-type: upper-roman  }   
     </STYLE>
     .
     .
    <OL CLASS="upper">
      <LI> This is the first item.
      <LI> This is the second item.
      <LI> This is the third item.
    </OL>

1. This is the first item.
2. This is the second item.
3. This is the third item.

Nested counters and scope

Counters are "self-nesting", in the sense that re-using a counter in a child element automatically creates a new instance of the counter. This is important for situations like lists in HTML, where elements can be nested inside themselves to arbitrary depth. It would be impossible to define uniquely named counters for each level.

OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". "; counter-increment: item }

The self-nesting is based on the principle that every element that has a 'counter-reset' for a counter X, creates a fresh counter X, the scope of which is the element, its preceding siblings, and all the descendants of the element and its preceding siblings.

In the example, an OL will create a counter, and all children of the OL will refer to that counter.

<OL>               <!-- (set item[0] to 0          -->
  <LI>item         <!--  increment item[0] (= 1)   -->
  <LI>item         <!--  increment item[0] (= 2)   -->
    <OL>           <!--  (set item[1] to 0         -->
      <LI>item     <!--   increment item[1] (= 1)  -->
      <LI>item     <!--   increment item[1] (= 2)  -->
      <LI>item     <!--   increment item[1] (= 3)  -->
        <OL>       <!--   (set item[2] to 0        -->
          <LI>item <!--    increment item[2] (= 1) -->
        </OL>      <!--   )                        -->
        <OL>       <!--   (set item[3] to 0        -->
          <LI>     <!--    increment item[3] (= 1) -->
        </OL>      <!--   )                        -->
      <LI>item     <!--   increment item[1] (= 4)  -->
    </OL>          <!--  )                         -->
  <LI>item         <!--  increment item[0] (= 3)   -->
  <LI>item         <!--  increment item[0] (= 4)   -->
</OL>              <!-- )                          -->
<OL>               <!-- (reset item[4] to 0        -->
  <LI>item         <!--  increment item[4] (= 1)   -->
  <LI>item         <!--  increment item[4] (= 2)   -->
</OL>              <!-- )                          -->

Smith Family

1. Helen
2. John
   1. Jim
   2. Katy
   3. Lucy
      1. Mavis
      2. Norm
      3. Olive
   4. Fay
3. Jill
4. Joy

The way ahead - Automatic numbering in CSS2

Automatic numbering in CSS2 is controlled with two properties, 'counter-increment' and 'counter-reset'. The counters defined by these properties are used with the counter() and counters() functions of the the 'content' property.

The 'counter-increment' property accepts one or more names of counters (identifiers), each one optionally followed by an integer. The integer indicates by how much the counter is incremented for every occurrence of the element. The default increment is 1. Zero and negative integers are allowed.

The 'counter-reset' property also contains a list of one or more names of counters, each one optionally followed by an integer. The integer gives the value that the counter is set to on each occurrence of the element. The default is 0.

If 'counter-increment' refers to a counter that is not in the scope of any 'counter-reset', the counter is assumed to have been reset to 0 by the root element.

See Page 2 for changing the bullets and colours, and Page 3 for spacing around the list
Lists is continued with a discussion on definition list styles.