ansaurus

Question

Answer 1

+2 A:

Give the first ordered list a CSS style that includes counter-reset: chapter, and give all subsequent ordered lists a style that includes counter-increment: chapter.

Edited to add: My understanding here wasn't complete. The "counter" stuff works only with the CSS "content" attribute, which inserts generated content. So the solution needs to use that attribute. Unfortunately, that is only supported in Internet Explorer starting with version 8.

<html>
<style type="text/css">

#firstList {
   counter-reset: chapter;
}
li{
   list-style-type:none;
   counter-increment: chapter;
}
li:before {
   content:counter(chapter) ". ";
}
</style>
<ul id="firstList">
   <li>first item</li>
   <li>second item</li>
   <li>third item</li>
</ul>
<p>intermediate text</p>
<ul>
   <li>fourth item</li>
   <li>fifth item</li>
   <li>sixth item</li>
</ul>
</html>

JacobM 2010-09-09 15:36:47

quick and elegant solution, not many people know how to use the counter

Litso 2010-09-09 15:40:14

hi @JacobM - unfortunately I tried this and was not able to get this going for my requirement. Are you able to provide an example of this at http://jsfiddle.net/ based on my requirement? Thanks.

tonsils 2010-09-16 14:22:40

Yeah, my understanding wasn't complete. Edited to expand and add an example.

JacobM 2010-09-16 17:36:15

Answer 2

A:

This is one of the reasons HTML5 allows the start attribute again:

<h1>1</h1>
<ol>
  <li>...
  <li>...
  <li>...
</ol>
<h1>2</h1>
<ol start=4>
  <li>...
  <li>...
  <li>...
</ol>

You'll need to update them all if you add or remove an item, but that shouldn't be too common in a ToC.

Ms2ger 2010-09-19 08:23:20

ansaurus

tags:

views:

answers:

Continuous Ordered List

related questions