Make OL list start from number different than 1 using CSS

Posted By Predrag on August 31, 2006

If you need to create an OL list that starts from number different than 1, here is an elegant solution. This is very useful if you need to display a listing on more pages (eg. there are 100 search results, and you want to display 10 results per page). In this case, if you are using OL list, it will start from number 1 on every page, and that is not a good solution because it will look like this:

Page 1

Division Bell
Atom Hearth Mother
Relics
Dark Side of the Moon
Wish You Were Here

Page 2

The Wall
More
Piper at the gates of Dawn
Final Cut
Meddle

In order not to use deprecated < ol start=”6″ > parameter in my second list, we’ve searched the Web for an adequate solution which complies with W3C standards – and we found it.

You need to write the following in your CSS:

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

And, this is how your lists should be defined:

<ol id="page_one">
	<li>Division Bell</li>
	<li>Atom Hearth Mother</li>
	<li>Relics</li>
	<li>Dark Side of the Moon</li>
	<li>Wish You Were Here</li>
</ol><ol id="page_two">
	<li>The Wall</li>
	<li>More</li>
	<li>Piper at the gates of Dawn</li>
	<li>Final Cut</li>
	<li>Meddle</li>
</ol>

These fieldsets represent separate pages, of course. Now, our lists look as we wanted them to look in the first place:

Page 1

Division Bell
Atom Hearth Mother
Relics
Dark Side of the Moon
Wish You Were Here

Page 2

The Wall
More
Piper at the gates of Dawn
Final Cut
Meddle

Let’s explain what happened here: if you set this CSS rule: OL {counter-reset: item 2;} your list will start from 3 (value is set to 0 by default, and list by default starts from 1). From some reason, you need to set LI:display:block; if you don’t do this, numbers won’t appear at all.

All you need to do now is to dynamically change the value in your counter-reset rule. You can do it in PHP, ASP, CF, etc…

li:before rule is used for defining the appearance of the number in your OL list. If you set display:block inside of li:before, you can create some great looking and also 100% clean CSS stuff.

Now, there is a twist in the tale – even though this rule is specified in W3C CSS2 standard (with even more great solutions, that will make XHTML coder’s live easier), IE 6 completely ignores these rules! However, in the Amazon Search created in Ruby example, created by my colleague, you can see how IE6 ignores the rule, but search results appear correctly, and the whole appearance looks acceptable. However, if you use Firefox, you’ll see our OL list in its full glory.

Category: Web Design | 57 Comments »
Tags: CSS tips, Oredered List Counter Reset, Styling Ordered lists, Web Design

About the author

Predrag

Few years ago, his key goal was to create 100% cross-browser pixel-precise pages - now he bothers us with Web 2.0 concept and clean W3C compliant code. One way or another he's a pain.

Comments

57 Responses to “Make OL list start from number different than 1 using CSS”

Richard says:
March 23rd, 2007 at 2:13 pm

Making ‘start’ from the ol tag and ‘value’ from the LI tag deprecated parameters was a mistake.

The number that a list starts at is meaning and not style. Putting it in the style sheet is going to create a lot of bloated style sheets. We have loads of ordered lists that span many pages. I don’t want to create separate styles for all of them.

I’m not following the W3C on this one. It’s just compliance for compliance sake.

Predrag says:
March 23rd, 2007 at 3:51 pm

Richard, I must say I agree with you on this one. They shouldn’t be deprecated, but since they are, I was verry happy to see that there is a fine solution.
Not awesome though, but it works.

Anthony says:
August 27th, 2007 at 1:04 pm

This is much easier:

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

Paul Bodea - Atelier 26 says:
December 4th, 2007 at 1:03 pm

Well that is a good solution. I am glad I found this

Hai Nguyen says:
July 1st, 2008 at 6:53 am

This is not working on IE7? How can I make tweak this to make it work for IE7?

Joachim Andersson, Web Accessibility Specialist says:
October 9th, 2008 at 2:49 pm

I was hoping this would be the solution to my problem, but going through the source code of this page I find that the start attribute is used in your working example. I tried removing the start attribute and the solution doesn’t work in neither IE or Firefox. I agree that this is how it should work, accordin to the CSS 2.1 Specification, but it seems web browsers have no support for it?

Avi says:
November 11th, 2008 at 5:17 pm

Maybe I am just dumb, but my solution would be to just remove the of the previous sequence of numbered list items and remove the of the next sequence of numbered list items, and you get your continuous numbering. (Often your “sequence” contains only one list item before another style “breaks” the sequence, typically a continue-type style.) I know that you then have all your other elements, e.g. , inside the list, but so far so good for me. Would this solution cause problems?

Any other solutions for this?

Also isn�t this a CSS issue and not really so much a RoboHelp issue?

Bradford Sherrill says:
August 4th, 2009 at 7:22 pm

Good post!

Ling Ling says:
September 8th, 2009 at 6:25 am

I can’t help but notice that despite this neat solution you’ve stilled used the deprectated tags to make this work?

Predrag says:
September 8th, 2009 at 10:31 am

Hi Ling, Ling, I am not sure what you mean. Which deprecated tags we used? It is very old post, so maybe I missed something.

Thanks,
Predrag

Danielle says:
September 14th, 2009 at 4:46 pm

Thinking the same as Ling here – you still have ‘start=”6″‘ in your markup…

Division Bell
Atom Hearth Mother
Relics
Dark Side of the Moon

Wish You Were Here

Page 2

The Wall
More
Piper at the gates of Dawn
Final Cut
Meddle

Danielle says:
September 14th, 2009 at 4:49 pm

but of course it came out as a list not code!!! How bout this…

<ol>
<li>Division Bell</li>
<li>Atom Hearth Mother</li>
<li>Relics</li>
<li>Dark Side of the Moon</li>
<li>Wish You Were Here</li>
</ol>
</fieldset><fieldset style="margin: 1em;"><legend>Page 2</legend>
<ol style="counter-reset: item 5;" start="6">
<li>The Wall</li>
<li>More</li>
<li>Piper at the gates of Dawn</li>
<li>Final Cut</li>
<li>Meddle</li>
</ol>

Daniel Richard says:
October 7th, 2009 at 7:30 am

Thanks for providing this information. I’m gonna try this out now.

David Chambers says:
January 29th, 2010 at 6:43 am

Note that the start attribute is back! Check out the relevant section of the HTML5 spec: [http://dev.w3.org/html5/spec/Overview.html#the-ol-element].

Shorin says:
February 19th, 2010 at 8:23 pm

Way to do it in IE7:

Conditional Comments.

These are only supported by IE, and are often a way to fix these IE only issues.

Simply add a duplicate of the OL inside a conditional comment for IE7 and make it use start=”(start number)” in that version.
Then hide the the normal OLs via CSS, so that duplicates don’t appear. You can use the same trick (conditional comments) to conditionally include an IE7-only stylesheet, or even conditionally include an IE7-only style tag.

Yes, its still not W3C compliant, but it helps when you’re working through an editor that tries to enforce it (such as HTML editors inside CMS systems). Those editors often dont interfere with comments in the HTML. If they strip them out, then this wont work.

example:
HTML:

Item number 7

You have to use the W3C method to get this to be Item 7

CSS:
ie7.css:

.normal-ol
{
display: none;
}

Shorin says:
February 19th, 2010 at 8:24 pm

Shorin says:
February 19th, 2010 at 8:25 pm

Oops the HTML didn’t come through sorry!

<!–[if IE 7]>
<link type="text/css" rel="stylesheet" href="ie7.css"/>
<![endif]–>

<!–[if IE 7]>
<ol class="ol-ie7" start="7">
<li>Item number 7</li>
</ol>
<![endif]–>
<ol class="normal-ol">
<li>You have to use the W3C method to get this to be Item 7</li>
</ol>

zdzolton says:
February 26th, 2010 at 12:08 am

BTW, the “start” attribute seems to be valid HTML 5.

http://dev.w3.org/html5/spec/Overview.html#the-ol-element

gerlie says:
March 4th, 2010 at 5:36 pm

This is what I am having trouble with.
I want a list that says.

1.
2.
3.
3.1
3.2
3.3
4.
5.
6.

How can I make that list numbering like the above?

Please help

Martijn says:
March 24th, 2010 at 12:32 pm

Not working here. In IE6 and IE7 the numbers aren’t visible, so I have no way of verifying if it’s doing anything.

digitalpbk says:
April 2nd, 2010 at 12:36 pm

CSS should not be defining the values logic, it should deal only with presentation, anyway .. thanks for the W3C Solution.

Wandtattoo says:
June 13th, 2010 at 10:06 pm

Thanks for this CSS overview. Best regards MAike

SimTech says:
October 4th, 2010 at 7:44 pm

It’s actually even easier than you think. What you’re doing is basically “pausing” a list so you can insert something. When you do this in text you use the tag. (Bells ringning now?”)

CSS
…

/* This style removes the indentation that creates. In my document it was 30pt */
.pauselist {margin-left:-30pt;}

XHTML
…
Text
Text

Item 1
Item 2

Text
Text
Text

Item 3
Item 4

Text
Text

—— Results ———
Text
Text

1. Item 1
2. Item 2

Text
Text
Text

3. Item 3
4. Item 4

Text
Text

SimTech says:
October 4th, 2010 at 7:48 pm

Let’s see if this works and shows markup.Sorry.
It’s actually even easier than you think. What you’re doing is basically “pausing” a list so you can insert something. When you do this in text you use the <div> tag. (Bells ringning now?”)

CSS
…

/* This style removes the indentation that <ol> creates. In my document it was 30pt */
.pauselist {margin-left:-30pt;}

XHTML
…
Text
Text
<ol>
<li>Item 1</li>
<li>Item 2
<div class=”pauselist”>
Text
Text
Text
<!– Okay now let’s continue with the list –>
</div>
</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
Text
Text

—— Results ———
Text
Text

1. Item 1
2. Item 2

Text
Text
Text

3. Item 3
4. Item 4

Text
Text

AC says:
October 7th, 2010 at 2:33 pm

This solution is just a hack, you’re just manually inserting numbers in front of each line. If you’re going to do this you may aswell do it in the HTML…

Added to the fact you’ve put the start attribute in your example… and it doesnt work without it in there I’d say this is not a good solution…

Ive just used the start attribute, as I can’t find a decent alternative and apparently its back in HTML 5