How to have sub ordered lists correctly

Question

I'm not sure I understand the logistics of this. Basically I wanted to make a simple listing on a web blog that looks like:

1.  item1
    a.  item2
2.  item3
    a.  item4
    b.  item5
3.  item6

And so on, basically a master list ordered numerically, with child lists under each master item that are lower-alpha ordered.

I achieved this effect by using this HTML markup:

<ol>
    <li>item1</li>
    <ol>
        <li>item2</li>
    </ol>   
    <li>item3</li>
    <ol>
        <li>item4</li>
        <li>item5</li>
    </ol>
    <li>item6</li>
</ol>

With this small CSS rule:

ol ol { list-style-type: lower-alpha; } /* sub ordered lists */

This issue I had was that according to the w3c validator:

Element ol not allowed as child of element ol in this context.

I think this problem ought have a very simple solution, I wasn't able to find one, and I'm not sure I follow why ol cannot be a child of ol.

Answer 1

You do it like this:

<ol>
    <li>item1
        <ol>
            <li>item2</li>
        </ol>
    </li> 
</ol>

You need to put the sublist inside the list item for the top level.

Answer 2

There are several ways to control your sub-ordered list, either with CSS, or HTML. You almost were achieving the effect you want, to get something like this:

1.  item1
    a.  item2
2.  item3
    a.  item4
    b.  item5
3.  item6

Your HTML should look like this:

<ol>
    <li>item1
        <ol>
            <li>item2</li>
        </ol>
    </li>
    <li>item3
        <ol>
            <li>item4</li>
            <li>item5</li>
        </ol>
    </li>
    <li>item6</li>
</ol>

And your CSS should look like this:

ol li{ list-style-type:decimal; } /* sub ordered lists level 1 */
ol li ol li { list-style-type: lower-alpha; } /* sub ordered lists level 2 */

You can also read more about a similar question here