Home/ Questions/Q 748153
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T14:17:14+00:00

I have a nested ordered list. <ol> <li>first</li> <li>second <ol> <li>second nested first element</li>

  • 0

I have a nested ordered list.

<ol>
  <li>first</li>
  <li>second
  <ol>
    <li>second nested first element</li>
    <li>second nested secondelement</li>
    <li>second nested thirdelement</li>
  </ol>
  </li>
  <li>third</li>
  <li>fourth</li>
</ol>

Currently the nested elements start back from 1 again, e.g.

  1. first
  2. second
    1. second nested first element
    2. second nested second element
    3. second nested third element
  3. third
  4. fourth

What I want is for the second element to be numbered like this:

  1. first

  2. second

    2.1. second nested first element

    2.2. second nested second element

    2.3. second nested third element

  3. third
  4. fourth

Is there a way of doing this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0