CSS counter-reset and increment - css

Question

I would like to fix my CSS counter so it resets on each occurrence of OL or UL top level parent. Nested OLs should not reset the counter, but it should reset only for each instance of top level OL or UL.
The css that is likely the problem:
section.post-content ol {
counter-reset: item;
}

Answer 1

You cann't target specifically top level elements (I think).
Instead, target all ol (as you have already), and to avoid reseting counter on non top level ol , create another rule:
ul ul {counter-reset: none}
ol ul {counter-reset: none}
see the result:
http://jsfiddle.net/rjqgz/

Answer 2

EDIT for solution: http://jsfiddle.net/rjqgz/2/
Here is the CSS for styled numbers and colored bullets in lists (etc). I included the html sections because this will work in Wordpress for creating outline numbering, and because it's easier to just style the content lists and unstyle all the rest of them.
section.post-content ol, section.post-content ul {
counter-reset: item;
}
section.post-content ul ol {counter-reset: none}
section.post-content ol ul {counter-reset: none}
section.post-content li {
display: block;
}
section.post-content ol > li {
position:relative;
list-style:none; }
section.post-content ol li:before {
counter-increment: item;
content: counters(item, ".") " ";
position:absolute;
top:-.05em;
left:-3.7em;
width:3em;
height:.9em; line-height:1em;
/* Some space between the number and the content in browsers that support
generated content but not positioning it (Camino 2 is one example) */
margin-right:8px;
padding:4px;
font-style:italic; font-size:1.02em; font-weight:bold;
font-family: Cambria, Cochin, serif;
opacity:.5;
text-align:right;
}
section.post-content ul > li {
position:relative;
list-style:none;
}
section.post-content ul > li:before { /* Position and style the bullet */
content:'\00B0'; /* CSS Special Character Converter: http://www.evotech.net/articles/testjsentities.html */
position:absolute;
top:-.1em;
left:-.75em;
width:.6em; height:1em; line-height:1em;
margin-right:8px;
padding:4px;
font-size:2.08em;
font-family: Cambria, Cochin, serif;
opacity:.4; /* If you want to change color instead, place in header.php */
text-align:center;
}
/* MARGINS */
/*mobile*/
section.post-content ol, section.post-content ul, section.post-content li { /*children indent*/
margin:0; padding:0; }
section.post-content ol > li, section.post-content ul > li {
margin:0 0em .3em 1em; }
#media only screen
and (min-width : 700px) {
section.post-content ol, section.post-content ul { /*children indent*/
margin:0; padding:0;
margin-left:2em;
}
section.post-content > ol, section.post-content > ul { /*parent*/
margin-left:0; padding-left:0; }
section.post-content ol > li, section.post-content ul > li {
margin:0 0em .3em 2em;
}
}