Nested lists in XHTML

There are lots of examples across the Internet explaining how to use CSS to number items on a list. It is certainly worth trying this technique, rather than hard coding the numbers in, or using the now deprecated<start=”15″>, if only to make it easier when you need to remove items later on.

The numbering system I wanted to achieve did not seem to be used as an example anywhere else, so I am logging my solution here: a) in case it is useful to anyone else; b) so I don’t forget it myself.

What I wanted to achieve

0. First item

a. first sub-heading

b. second subheading

1. Second item

a. first sub-heading

b. second subheading

How I tagged the text

<ol class=”regulations”>
<li>Preamble/introduction
<ol>
<li>The Department of Library Services (hereafter referred to as the Library) provides users with materials, services and facilities for learning, teaching and research purposes. The regulations are designed to ensure that such provision is made as effectively and fairly as possible and that the integrity of the library service is maintained. The regulations cover the conditions for admission and use of materials and facilities, the prohibition of inappropriate activities and the penalties for infringement.</li>

<li>These regulations have the been approved by the Academic Board and have the support of the Governing Body of the University. They are subject to review from time to time.</li>
</li></ol>

How I set the CSS

/* Library Regulations formatting */
.regulations
{
counter-reset: heading -1;
}
.regulations ol
{
counter-reset: item ;
margin: 1em;
padding: .3em;
}
.regulations li
{
display: block;
margin: .5em 0;
padding-left: 2em;
}
.regulations li::before
{
margin-left: -2em;
margin-right: .5em;
text-align: center;
counter-increment: heading;
content: counter(heading) “.”;
}
.regulations ol li::before
{
margin-left: -2em;
margin-right: .5em;
text-align: center;
counter-increment: item;
content: counter(item, lower-alpha) “.”;

How it works

I am using the counter technique, as explained on numerous sites like: Zibaldone and W3schools. The ‘counter-reset: heading -1;’ reset the counter for ‘heading’ to the number below zero, so that when the ‘regulations class is encountered the count will increment to zero.

I use: ‘counter-reset: item ;’ to reset the counter for ‘item’ to the default number which is already zero. There are some other formatting instructions in ‘.regulations ol’ and ‘.regulations li’, the most important of these is the ‘display: block;’.

In ‘.regulations li::before’ I have:

counter-increment: heading;
content: counter(heading) “.”;

These two lines add one to the Headings numbering sequence and display the result, followed by a ‘.’.

To get the sub-headings to display preceded by a count using lower case alpha letters (a,b,c, etc.) I use:

counter-increment: item;
content: counter(item, lower-alpha) “.”;

in

.regulations ol li::before

 Result

You can, for the moment, see the finished result on the Library Regulations page on the DMU Library website. However, plans are afoot to revise and re-publish these regulations.

About Philip Adams

Senior Assistant Librarian at De Montfort University. I am interested in digital preservation and the use of data to measure a library's impact. All comments own.
This entry was posted in XHTML. Bookmark the permalink.