Looking to implement a counter-increment feature on ordered lists. The goal is for each ol to pick up where the previous count left off.
The functionality is successful when there are no separate wrapping divs around the ols. However, the issue arises when trying to continue the count with multiple ols that have their own wrapping divs:
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">
<!-- The count does not continue 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);
}
Is there a way to maintain the count for each ol while still utilizing the wrapping divs?