What is the correct way to number a list?

Question

Possible Duplicate:
Number nested ordered lists in HTML

Apologies as I'm a bit of a css noob.

I have a list of terms and conditions.

The each section is numbered like this:

1.0 This Website
1.1 This website...
1.2 etc etc

2.0 ...
2.1 ...
2.2 ...

I know I can use an ordered list, but as I understand it the 'start' property is depreciated.

What alternatives have I got?

**start** was reintroduced in html5, so you can use it https://developer.mozilla.org/en-US/docs/HTML/Element/ol — Ankur, Jan 17 '13 at 10:33
Check this out : http://stackoverflow.com/questions/2729927/number-nested-ordered-lists-in-html — Karan Punamiya, Jan 17 '13 at 10:37

score 2 · Answer 1 · answered Jan 17 '13 at 11:20

Stealing from Mozilla - Using CSS counters

JSFiddle

HTML:

<ol class="level0">
  <li>This Website
    <ol>
      <li>This website</li>
      <li>etc etc</li>
    </ol>
  </li>
  <li>...
    <ol>
      <li>...</li>
      <li>...</li>
    </ol>
  </li>
</ol>

CSS:

ol {
  counter-reset: section;
  list-style-type: none;
}

ol.level0 > li:before {
  counter-increment: section;
  content: counters(section, ".") ".0 ";
}

li:before {
  counter-increment: section;
  content: counters(section, ".") " ";
}

score 1 · Accepted Answer · answered Jan 17 '13 at 10:35

1

You can also use list-style-type css property.

ol { list-style-type: decimal; }

answered Jan 17 '13 at 10:35

Ankur

12,676
7
37
67

This is the default setting, and it generates simple numbering 1, 2, 3 etc., not numbering like “1.0”. – Jukka K. Korpela Jan 17 '13 at 15:22

score 1 · Answer 3 · edited May 23 '17 at 11:49

You can use counter-increment for this. Write like this: HTML

<ol>
  <li>item 1
    <ol>
      <li>sub item 1</li>
      <li>Sub item 2</li>
   </ol>
  </li>
  <li>item 2
    <ol>
      <li>sub item 1</li>
      <li>Sub item 2</li>
   </ol>
  </li>
</ol>

CSS

ol {
  counter-reset: section;
  list-style-type: none;
}     
ol li { counter-increment: section; }

ol li:before  { content: counters(section, ".") ". "; }

Check this http://jsfiddle.net/xC8ne/10/

Check this for more Number nested ordered lists in HTML

What is the correct way to number a list?

3 Answers3