Can I get the CSS counter value of the parent?

Question

I need to implement the following list style:

01 Item 1
02 Item 2
    02a Item 2a
    02b Item 2b
03 Item 3

How can I get the counter value of the parent to use in the :before content of my sub item? (02 in my above example)

Answer 1

You use two different counters: one for the li parents and one for the li subitems. Then, in each li subitem, concatenate multiple counter() functions using each counter, like this:

ol {
    counter-reset: item;
}

ol ol {
    counter-reset: subitem;
}

li {
    display: block;
}

/* First level of parent items */
li:before {
    content: counter(item, decimal-leading-zero) ' ';
    counter-increment: item;
}

/* Second level of subitems */
li li:before {
    /* counter(item) for the parents, counter(subitem) for the subitems */
    content: counter(item, decimal-leading-zero) counter(subitem, lower-alpha) ' ';
    counter-increment: subitem;
}

jsFiddle demo, tested in all browsers that support :before and CSS2.1 counters including IE8+

Useful reading: W3C CSS2.1 generated content spec, §12.4.1 Nested counters and scope