css counter-increment for section numbers

Question

I am trying to get the css Counter to work. It works fine until I have a,b,c in one of the list items, then it messes up. This is what I want to display

1. ACKNOWLEDGEMENTS

 1.1   blah blah blah
 1.2   blah blah blah
 1.3   blah blah blah

2. Risk Statement

 2.1   blah blah blah
 2.2   blah blah blah
 2.3   blah blah blah

3. License
 3.1   blah blah blah
 3.2   blah blah blah
   a blah blah blah
   b blah blah blah
   c blah blah blah
 3.3   blah blah blah

4. License
 4.1   blah blah blah
 4.2   blah blah blah
 4.3   blah blah blah

What is happening is that a,b,c is being counted so 3.3 is displaying as 4.3 and then section 4 is starting at 5.1....Here it is in JSFiddle(a,b,c are not showing but ignore that - the numbering is the important thing)... http://jsfiddle.net/XQKcy/11/

Answer 1

The ol li will affect all li elements within the list, even those of child ol elements.

As such you need to identify the immediate children, and only apply to those, using ol>li syntax.

See the updated fiddle - http://jsfiddle.net/XQKcy/14/