Question

Can we retrieve in CSS the default counter value of an li?

For example:
If I have 6 <li>, separated in 2 <ol>, but I want the <li> to be listed from 1 to 6, not 1 to 3 twice. I used value="4" on the first <li> of the second <ol>, so it worked, but now since I’m using

ol {
  counter-reset: i 0;
}

ol li:before {
    content: counter(i);    
    counter-increment: i;
    font-weight: bold;
}​

The content: counter(i); to not take in count the value="4" on the first <li> of the second <ol>.

Is there something I can do about this?

View on JsFiddle

Answer 1

Does this suit your needs? View on JSFiddle

HTML

<ol>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ol>
<ol>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ol>

CSS

ol:first-of-type {
  counter-reset: i 0;
}

ol li:before {
  content: counter(i);    
  counter-increment: i;
  font-weight: bold;
}​