Achieving Sub Numbering on Ol Items HTML

Achieving sub numbering on ol items html

Several options, in fact, varying in robustness and support:

Do this in the code that generates the lists. Provided it is generated HTML, after all. Wikipedia does that, for example for their section numbers.
You could write some JavaScript to do it after page loading. Won't work with JavaScript turned off, naturally.
Or you can turn to CSS counters. This is probably the best option, if you don't need to support legacy versions of IE, where it is supported since version 8.
Counters are "self-nesting", in the sense that resetting a counter in a descendant element or pseudo-element automatically creates a new instance of the counter. This is important for situations like lists in HTML, where elements can be nested inside themselves to arbitrary depth. It would be impossible to define uniquely named counters for each level.

Example(s):

Thus, the following suffices to number nested list items. The result is very similar to that of setting 'display:list-item' and 'list-style: inside' on the LI element:
```
OL { counter-reset: item }
OL>LI { display: block }
OL>LI:before { content: counters(item, ".") ". "; counter-increment: item }
```

Numbering a nested list in a single ol list

If you can't change your HTML markup, you can simulate nested numbering on a single list with CSS counters.

You need to remove the default list-style-type and add the counter with pseudo elements.

.sub-item elements can have their own counter (sub-counter in the following example) that doesn't affect the one set on all the <li> elements (main-counter in the following example) :

ol {
  counter-reset: main-counter, sub-counter;
  list-style-type:none;
  padding:0;
}
li {
  counter-increment: main-counter;
  counter-reset: sub-counter;
}
li::before {
  content: counter(main-counter) ". ";
}
li.sub-item {
  counter-increment: sub-counter;
  padding-left:1em;
  counter-reset: none;
}
li.sub-item::before {
  content: counter(sub-counter, lower-alpha) ". ";
}

<ol>
  <li>One</li>
  <li>Two</li>
  <li>THree</li>
  <li class="sub-item">Sub three 1</li>
  <li class="sub-item">Sub three 2</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li class="sub-item">Sub three 1</li>
  <li class="sub-item">Sub three 2</li>
  <li>Eight</li>
</ol>

HTML ordered list 1.1, 1.2 (Nested counters and scope) not working

Uncheck "normalize CSS" - http://jsfiddle.net/qGCUk/3/
The CSS reset used in that defaults all list margins and paddings to 0

UPDATE http://jsfiddle.net/qGCUk/4/ - you have to include your sub-lists in your main <li>

ol {  counter-reset: item}li {  display: block}li:before {  content: counters(item, ".") " ";  counter-increment: item}

<ol>  <li>one</li>  <li>two    <ol>      <li>two.one</li>      <li>two.two</li>      <li>two.three</li>    </ol>  </li>  <li>three    <ol>      <li>three.one</li>      <li>three.two        <ol>          <li>three.two.one</li>          <li>three.two.two</li>        </ol>      </li>    </ol>  </li>  <li>four</li></ol>

Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with css?

You can use counters to do so:

The following style sheet numbers nested list items as "1", "1.1", "1.1.1", etc.
OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }

Example

ol { counter-reset: item }li{ display: block }li:before { content: counters(item, ".") " "; counter-increment: item }

<ol>  <li>li element    <ol>      <li>sub li element</li>      <li>sub li element</li>      <li>sub li element</li>    </ol>  </li>  <li>li element</li>  <li>li element    <ol>      <li>sub li element</li>      <li>sub li element</li>      <li>sub li element</li>    </ol>  </li></ol>

How to start a new list, continuing the numbering from the previous list?

As already said, you need :before and content, but you also need to disable the default list numbering. This is your fixed CSS:

ol.start { 
    counter-reset: mycounter; 
}
ol.start li, ol.continue li {
    list-style: none;
}
ol.start li:before, ol.continue li:before { 
    content: counter(mycounter) ". "; 
    counter-increment: mycounter;
}

You don't need to reset the counter for ol.continue, just continue to use your custom counter. The above code makes sure that the counter is only used for the ol.start and ol.continue lists.

Is it possible to specify a starting number for an ordered list?

If you need the functionality to start an ordered list (OL) at a specific point, you'll have to specify your doctype as HTML 5; which is:

<!doctype html>

With that doctype, it is valid to set a start attribute on an ordered list. Such as:

<ol start="6">  <li>Lorem</li>  <li>Ipsum</li>  <li>Dolor</li></ol>

Add a . after li numbering

Here's a Fiddle of what you want.

All I did was change the CSS so that the ordered-list-items have a period at the end, unless they're deeper than 1 level. Fairly simple.

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

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

No need for extra, unnecessary classes.

Hope this helps

Number nested ordered lists in HTML

Here's an example which works in all browsers. The pure CSS approach works in the real browsers (i.e. everything but IE6/7) and the jQuery code is to cover the unsupported. It's in flavor of an SSCCE, you can just copy'n'paste'n'run it without changes.

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2729927</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                if ($('ol:first').css('list-style-type') != 'none') { /* For IE6/7 only. */
                    $('ol ol').each(function(i, ol) {
                        ol = $(ol);
                        var level1 = ol.closest('li').index() + 1;
                        ol.children('li').each(function(i, li) {
                            li = $(li);
                            var level2 = level1 + '.' + (li.index() + 1);
                            li.prepend('<span>' + level2 + '</span>');
                        });
                    });
                }
            });
        </script>
        <style>
            html>/**/body ol { /* Won't be interpreted by IE6/7. */
                list-style-type: none;
                counter-reset: level1;
            }
            ol li:before {
                content: counter(level1) ". ";
                counter-increment: level1;
            }
            ol li ol {
                list-style-type: none;
                counter-reset: level2;
            }
            ol li ol li:before {
                content: counter(level1) "." counter(level2) " ";
                counter-increment: level2;
            }
            ol li span { /* For IE6/7. */
                margin: 0 5px 0 -25px;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>first</li>
            <li>second
                <ol>
                    <li>second nested first element</li>
                    <li>second nested second element</li>
                    <li>second nested third element</li>
                </ol>
            </li>
            <li>third</li>
            <li>fourth</li>
        </ol>
    </body>
</html>

Achieving Sub Numbering on Ol Items HTML