Question

Quite simply, I want an ordered list to work like this:

 1. Foo
 2. Bar
3a. Baz
3b. Qux
 4. Etc...

Is there any way to easily do something along these lines in HTML?

Answer 1

Given the following mark-up:

<ol>
    <li>Foo</li>
    <li>
        <ol>
           <li>bar</li>
           <li>baz</li>
        </ol>
    </li>
    <li>Something else...</li>
</ol>​

The following CSS almost works:

ol {
    counter-reset: topLevel;
}

li {
    counter-increment: topLevel;
    margin-left: 1em;
}

li::before {
    content: counter(topLevel) '. ';
    margin-right: 0.3em;
}

ol ol {
    counter-reset: secondLevel;
}

ol ol li {
    counter-increment: secondLevel;
}

ol ol li::before {
    content: counter(topLevel) counter(secondLevel, lower-alpha) '. ';
}

JS Fiddle demo.

The only problem with this, so far, is that it contains the topLevel count against both the inner li elements (as you wanted), but also against the outer li (that contains those inner elements), so…not quite there, yet.

And the above problem resolved! …in those browsers that support the CSS :not() selector:

ol {
    counter-reset: topLevel;
}

li {
    counter-increment: topLevel;
    margin-left: 1em;
}

li:not(.hasChild)::before {
    content: counter(topLevel) '. ';
    margin-right: 0.3em;
}

ol ol {
    counter-reset: secondLevel;
}

ol ol li {
    counter-increment: secondLevel;
}

ol ol li::before,
ol li.hasChild ol li::before {
    content: counter(topLevel) counter(secondLevel, lower-alpha) '. ';
}

JS Fiddle demo.

I forgot (originally) to note that for this to work (because CSS doesn’t have a parent selector (as yet) I had to add a specific class to those li elements with child ol elements in order to appropriately hide the duplication of the number. In this case I chose the class-name .hasChild (as can be seen in the Fiddle).

Incidentally, a small change to the li:not(.hasChild)::before rules, allows for the right-aligned text:

li:not(.hasChild)::before {
    content: counter(topLevel) '. ';
    width: 2em;
    margin-right: 0.3em;
    display: inline-block;
    text-align: right;
}

JS Fiddle demo.