Nested lists

Nested HTML ordered lists with nested counters using CSS. The JavaScript bit adds support for the start attribute on ol elements.

HTML

<ol start="3">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>This is a long item
        <br/>with line breaks</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>
      <div>
      <span>Dummy Text</span>
        <ol class="nested">
            <li>Inner item 1</li>
            <li>Inner item 2</li>
            <li>Inner item 3</li>
            <li>Inner item 4</li>
        </ol>
      </div>  
    </li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
</ol>

CSS

ol {
    font: 12px/20px Arial, sans-serif;
    padding: 0 0 0 40px;
   
}

/* */
.csscounters ol {
    counter-reset: nested-list 0;
}

.csscounters ol li {
    counter-increment: nested-list;
}

.csscounters ol.nested {
    list-style: none;
}

.csscounters ol.nested > li {
    position: relative;
}

.csscounters ol.nested > li:before {
    position: absolute;
    left: -40px;
    width: 32px;
    content: counters(nested-list, '.') '.';
    text-align: right;
}
span {
  display:inline;
}
.nested {
  display:inline;
}
/* */

JavaScript

(function (win, undefined) {

    var doc     = win.document,
        testEl  = doc.createElement('div'),
        support = testEl.style.counterReset !== undefined;

    // Clean up
    testEl.parentNode && testEl.parentNode.removeChild(testEl);

    testEl = null;

    // Add detected class names
    doc.documentElement.className += ' ' + (support ? '' : 'no-') + 'csscounters';

    var nestedList = win.nestedList = function (counterName) {
        if (!support) return false;

        // Get all ordered lists on the page
        var lists = (doc.querySelectorAll && doc.querySelectorAll('ol')) || doc.getElementsByTagName('ol'),
            ol;

        counterName = counterName || 'nested-list';

        // Correct css counter values
        for (var i = 0, l = lists.length; i < l; i++) {
            ol = lists[i];

            // Set custom reset value;
            ol.style.counterReset = counterName + ' ' + (ol.start - 1);
        }
    };

    if (doc.readyState === "complete") {
        // Document already loaded
        nestedList();
    } else {
        var init;

        init = function () {
            // Remove both event listeners on first run
            doc.removeEventListener("DOMContentLoaded", init, false);
            win.removeEventListener("load", init, false);

            nestedList();
        };

        // Actual document ready event
        doc.addEventListener("DOMContentLoaded", init, false);

        // Fallback to window.onload
        win.addEventListener("load", init, false);
    }

})(window);