html - Counter-increment with wrapping divs -

i want use counter-increment on ordered lists. want each ol continue on previous count.

it works when don't have separate wrapping divs around ols. note works second ol within same wrapping div, stops working next 2 ols has separate wrapping div:

http://jsfiddle.net/graphic_dev/lsn49t16/1/

html

<div class="wrapper">     <ol class="split start">       <li>lorem</li>       <li>ipsum</li>       <li>dolor</li>     </ol>      <ol class="split">       <li>sit</li>       <li>amet</li>     </ol> </div>  <div class="wrapper">     <!-- stops working here -->     <ol class="split">       <li>consectetur</li>       <li>adipiscing </li>     </ol>      <ol class="split">       <li>elit</li>       <li>sed</li>     </ol> </div> 

css

.start {     counter-reset: mycounter; }  .split {     list-style-type: none; }  .split li:before {     counter-increment: mycounter;     content: counter(mycounter, upper-alpha); } 

how continuing count each ol? need wrapping divs

from spec

the scope of counter starts @ first element in document has 'counter-reset' counter , includes element's descendants , following siblings descendants.

so, need call counter-reset on wrapping element of lists, or first <div class="wrapper">.

here's update initialize mycounter on body example.

and spec

if 'counter-increment' or 'content' on element or pseudo-element refers counter not in scope of 'counter-reset', implementations should behave though 'counter-reset' had reset counter 0 on element or pseudo-element.

so list item in second div initialized counter each of items.