Collected by
Elizabeth Janson

Home Page

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>
  1. makes this list item number 30.
  2. makes this list item number 40.
  3. 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'.

Note. This document does not specify the exact mechanism of each numbering system (e.g., how roman numerals are calculated). A future W3C Note may provide further clarifications.

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>
will give us
  1. This is the first item.
  2. This is the second item.
  3. This is the third item.
When a style is selected, and the browser does not recognise it, the list defaults to decimal.

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.

Example(s):

Thus, the following suffices to number nested list items. The result is very similar to that of setting 'display:list-item' and 'list-style: inside' on the LI element:

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.

The following HTML fragment will use the indicated counters.

<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.

Email
CSS begins here
Back to introducing lists or on to definition list styles.

This page is part of Elizabeth Janson's web site

http://www.oocities.org/elizatk/index.html

My other sites are the Anglican Parish of Northern Mallee,
Tetbury residents in the Eighteenth Century
my Australian Family History and Barrie, our Family Poet.