How to achieve decimal numbering in ordered lists?

Question

With HTML and CSS, can I achieve this?

1.
1.1
1.2
2.
2.1
2.2

using <li> and <ul> tags?

Answer 1

For CSS-compliant browsers you could use:

ul { counter-reset:item; }
ul > li { counter-increment:item; }
ul > li:before {content: counter(item); }

ul > li > ul { counter-reset:subitem; }
ul > li > ul > li { counter-increment:subitem; }
ul > li > ul > li:before { content: counter(item) "." counter(subitem); }

Answer 2

There's no cross-browser way of doing it.

The best you can achieve is nested ordered lists:

<ol>
    <li>Item 1
        <ol>
            <li>Subitem 1</li>
        </ol>
    </li>
</ol>

and then style each nested list to have a different type:

ol {
    list-style-type: upper-roman;
}
ol ol {
    list-style-type: decimal;
}

Hope this helps!

Answer 3

http://www.w3.org/TR/CSS2/generate.html

But, yeah, this is for modern browsers only. Nested OLs is probably the way to go.

Answer 4

Yes, this can be done with CSS Counters. However, it doesn't work on all browsers.

Answer 5

Consider using DL/DT/DD instead of OL/UL and hard-code the values in the DT.

Answer 6

CSS 2.1 provides user-definable counters, which can be used to count elements. Combined with the :before and :after pseudo-classes, you can output the counter value to create automatically numbered headings.

Unfortunately, at least Internet Explorer does not support any of this, even in the latest version. But at least Firefox does support it very well, so if you just want to add it as a enhancement which does not make your site unusable if it is not supported, you can still use it.

Answer 7

One line of javascript will do this. Used in a table of contents:

<td class="session">
<script>
{document.getElementsByClassName("session")[num].innerHTML = "1." + (++num);}
</script>
</td>

num is a global variable in the document initialized to zero at an appropriate place upstream. The above produces 1.1 at the first instance. Change to num++ and get 1.0.

Answer 8

html code :

<ul>
  <li>1  </li>          
  <li>1.1</li>    
  <li>1.2</li>      
  <li>2  </li>                  
  <li>2.1</li>  
  <li>2.2</li>  
</ul>

css code:

li  {   list-style:none; }