Can I get the value of the parent CSS counter?

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 value of the parent counter for use in the :before content of my sub? (02 in my example above)

Answer 1

You use two different counters: one for li parents and one for li subtexts. Then, in each li subtopic, combine several counter() functions using each counter, for example:

 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 counters :before and CSS2.1, including IE8 +

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

Answer 2

See this : there is no way in CSS to do such things, obviously you will need to use JavaScript for it, but the pseudo-elements are not in the afaik DOM. As for the other answers: it wants the counter value to appear before the list items.

Answer 3

No, CSS does not support such “variable” things. All you can do is set the same style as the parent.