CSS Counters - Incrementing Deeply Nested Lists

Question

I have a multi-page form and each page is contained within a list item. Each of those list items contains an ordered list with questions in its list items. Each of those list items contains an unordered list with a selection of either radio or checkbox input types.

I'm trying to get CSS counters to increment on the ordered list's list items.

Here's a basic example: http://jsfiddle.net/wCbvb/

<ol>
    <li>
        <h1>Page 1</h1>
        <ol>
            <li>
                <h2>Question 1</h2>
                <ul>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                </ul>
            </li>
            <li>
                <h2>Question 2</h2>
                <ul>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                </ul>
            </li>
        </ol>
    </li>
    <li>
        <h1>Page 2</h1>
        <ol>
            <li>
                <h2>Question 3</h2>
                <ul>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                </ul>
            </li>
            <li>
                <h2>Question 4</h2>
                <ul>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                </ul>
            </li>
        </ol>
    </li>
    <li>
        <h1>Page 3</h1>
        <ol>
            <li>
                <h2>Question 5</h2>
                <ul>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                </ul>
            </li>
            <li>
                <h2>Question 6</h2>
                <ul>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                </ul>
            </li>
        </ol>
    </li>
</ol>

I'm trying to get the questions (the list items which contain the h2's) to increment the counter and continue into the next list. I'm not sure if this is possible or not, thanks for looking. I would only use a pure CSS solution to this using CSS counters. Thank you much :)

Answer 1

There you go: http://jsfiddle.net/S5CnU/

You will want to take a look at CSS counter-increment and counter-reset along with content, :before and :after.

In the example above you no longer need to keep type Question number in, it is already handled by CSS.

.questions {
    counter-reset: question;   
}

.questions > li > ol > li {
    list-style-type:none;
}

.questions > li > ol > li > h2:after { 
    content: counter(question);
}

.questions > li > ol > li > h2:before {
    counter-increment: question;
    content: counter(question) ":= ";
}

Note: I gave your first ol the questions class.