Using CSS content to style a hierarchical nested list

Question

I had a problem using the css "content" property to create an ordered list that was created to be displayed using decimals for more deeply nested elements. What I'm trying to do seems like an obvious task, but I still haven’t succeeded, and I encounter some problems with the cross browser, but I can’t find a lot of noise in the boarding schools ... What I'm trying to do is quite clearly stated in the image that I attached at the bottom of this question.

My CSS:

ol {list-style:none; font:11px arial; margin:0px 0px 0px 10px; padding:0;} ol li:before { content: counter(num) ". "; counter-increment: num; counter-reset: sub_num; } ol ol li:before { content: counter(num) "." counter(sub_num) " "; counter-increment: sub_num; counter-reset: sub_sub_num; } ol ol ol li:before { content: counter(num) "." counter(sub_num) "." counter(sub_sub_num) " "; counter-increment: sub_sub_num; counter-reset:none; } 

My HTML:

 <ol> <li>Level 1 - should be '1.'</li> <li>Level 1 - should be '2.' <ol> <li>Level 2 - Should be '2.1'</li> <li>Level 2 - Should be '2.2' <ol> <li>Level 3 - Should be '2.2.1'</li> <li>Level 3 - Should be '2.2.2'</li> </ol> </li> </ol> </li> <li>Level 1 - should be '3.' <ol> <li>Level 2 - Should be '3.1'</li> </ol> </li> </ol> 

My results

Unfortunately, css does not increment the value of the 'num' variable

 counter-increment: num; 

in any browser, but Chrome does not increase "sub_sub_num"

 counter-increment: sub_sub_num; 

I'm a bit puzzled as it seems that all browsers are internally incompatible with the way they handle styles (why do all browsers ignore num increment but accept sub_num increment?) And this is a bit awesome firefox etc. have the same behavior, while chrome seems to handle it especially poorly (I'm used to being a weird person).

Here is an image with the conclusions of my sample for ff8, chrome16 and ie8, which shows the outputs that I see, along with the user agent string:

Am I just missing something, or is this a clear problem? Are there any good options?

Answer 1

There is a convenient function counters() that handles all this automatically for you - just go to the num variable and the period character as a separator. You do not need to create or increment any other variables.

You also forgot reset num in the top level ol element.

Here is the CSS you need:

 ol { list-style: none; font: 11px arial; margin: 0px 0px 0px 10px; padding: 0; counter-reset: num; } ol li:before { content: counter(num) '. '; counter-increment: num; } ol ol li:before { content: counters(num, '.') ' '; } 

jsFiddle demo

If you want to understand how to use multiple counters with nested lists, this answer demonstrates something more complex. The idea is to reset your counters in parent ol elements and increment them in their child li:before pseudo-elements; in your case, you do both in li:before pseudo-elements, which is not entirely correct.

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

Answer 2

@BoltClock your solution works well if and

tags not in. your script is missing if pasted in (even if the css div is empty), you are thinking of something to fix this: 1. clause 1.1 clause 1.2 clause 3. element (and not 2 as expected)