Select Page

As I have said in other posts, I am also an instructor at Clark College in Vancouver, Washington. Recently I had a student who wanted to create an ordered list of items in two columns and needed to have the list item numbering continue from the first column to the second. In the early days of HTML, this was accomplished by adding an attribute to the

    tag in the second column like this:

    Which would cause the ordered list to start with the value of 3 (or in the case of my student, using roman numerals, III).

    Simple! This results in:

    list

    But what if you want to duplicate this using the new improved techniques? The good news is that you can, but it is not as simple. You have to use CSS properties—and quite a few of them. Here is the CSS to create the same list:

    This gives the following:

    listcss

    Is this an improvement? Well, it certainly isn’t an improvement in ease of coding. It can be argued that you can now to some very impressive formatting of the numbers in the list. And that is true.

    But why not simply add a new CSS property for lists, something like list-counter-reset: 3;? How hard would that have been? If people only wanted to restart the numbering, then instead of

    they could have just used the HTML:

    and the CSS:

    As I said, sometimes they get it wrong.

    So, if you need to restart list numbering, the CSS above is how you do it. You can see the code at http://ctec.clark.edu/~rwallace/class-exercises/licounter.htm. Load the page in a browser and see what happens as you disable the various CSS declarations so you get a good understanding of what each one is doing.