ansaurus

Question

Answer 1

A:

~~This is not possible in pure HTML/CSS.~~ See BalusC's answer for a great thinking-out-of-the-box solution. A list of numbering types can be found at w3schools, here.

The closest option I was able to find is use of the value attribute, from w3c, but the following markup

<ol>
    <li value="30">
        makes this list item number 30.
    </li>
    <li value="40">
        makes this list item number 40.
    </li>
    <li>
        makes this list item number 41.
    </li>
    <li value="2.1">
        makes this list item number ...
    </li>
    <li value="2-1">
        makes this list item number ...
    </li>
</ol>

produces a list numbered 30, 40, 41, 2 and 2.

As John already pointed out, your best bet is going to be scripting, in this situation.

Lord Torgamus 2010-04-28 13:54:07

Answer 2

A:

With a little tweaking, you should be able to adapt the technique used here (in the second example) for creating sequential lists.

Robert Harvey 2010-04-28 13:54:57

Answer 3

+10 A:

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"&gt;&lt;/script&gt;
        <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>

BalusC 2010-04-28 13:57:38

Very nice solution!

Rick de Graaf 2010-04-28 13:58:45

Not even in IE8?

Robert Harvey 2010-04-28 14:02:04

Works in IE8, not in IE6/7. I updated the answer.

BalusC 2010-04-28 14:04:07

can this solution be altered so that the styles are applied using JQuery? If so would this then work in all browsers?

John 2010-04-28 14:13:01

@John: OK, I added it. It however won't work on IE6/7 with JS disabled :)

BalusC 2010-04-28 14:25:16

How do I make it work if I have more than 2 levels? Say, with 5 levels?

Ragnar 2010-05-11 08:27:52

Ah, and it also doesn't work well with paragraphs. Say if you have multiple paragraphs in one list element. No <p> goodness, only <br /> works.

Ragnar 2010-05-11 09:03:14

ansaurus

tags:

views:

answers:

Number nested ordered lists in HTML

related questions