Counter-increment with wrapping divs

Question

I want to use a counter-increment on ordered lists. I want each ol to continue on the previous count.

It works when I don't have separate wrapping divs around the ol s. Note that it works for the second ol which is within the same wrapping div, but it stops working for the next two ol s which has a 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">
    <!-- It 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 do I get it continuing the count for each ol ? I need the wrapping divs

Answer 1

From the Spec

The scope of a counter starts at the first element in the document that has a 'counter-reset' for that counter and includes the element's descendants and its following siblings with their descendants.

So, you need to call the counter-reset on the wrapping element of your lists, or the first <div class="wrapper"> .

Here's an update which initialize the mycounter on body as an example.

And also from the spec

If 'counter-increment' or 'content' on an element or pseudo-element refers to a counter that is not in the scope of any 'counter-reset', implementations should behave as though a 'counter-reset' had reset the counter to 0 on that element or pseudo-element.

so the list item in the second div actually initialized a counter for each of the items.