How to use CSS counters in lists with and without resetting the counters?-CodePudding

Paul Hoffman asked this question some years ago.

I want to have multiple "ol" lists where the counter value does not reset between lists. Another way to say this is that I want the counter for the first "li" in the second list to be one higher than the counter value from the last element of the previous list. Is there some CSS magic that will do this?

I understand the suggested solution. However, if I now want to add a third list of which the counter has to start with the value one again. How can I accomplish this?

CodePudding user response：

You can wrap your lists in a higher level wrapper

.list-wrapper {
  counter-reset: item;
}

li {
  display: block;
  list-style: none;
}

li:before {
  display: inline-block;
  content: counter(item) ". ";
  counter-increment: item;
}

<div >
  <ol>
    <li> An item</li>
    <li> An item</li>
    <li> An item</li>
  </ol>
  <p> Something else </p>
  
  <ol>
    <li> An item</li>
    <li> An item</li>
    <li> An item</li>
  </ol>
</div>

<p> And a different list: </p>

<div >
  <ol>
    <li> An item</li>
    <li> An item</li>
    <li> An item</li>
  </ol>
  <p> Something else </p>
  
  <ol>
    <li> An item</li>
    <li> An item</li>
    <li> An item</li>
  </ol>
</div>

CodePudding user response：

Based on this answer:

<html>
<head>
<style>
    #list-one { 
        counter-reset : item;
    }
    #list-three { 
        counter-reset : item 0;
    }
    li {
        display : block;
    }
    li:before {
        display : inline-block;
        content : counter(item) ". ";
        counter-increment : item;
    }
</style>
</head>
<body>
    <ol id="list-one">
        <li>One</li><li>Two</li><li>Three</li>
    </ol>
    <ol id="list-two">
        <li>Four</li><li>Five</li><li>Six</li>
    </ol>
    <ol id="list-three">
        <li>Seven</li><li>Eight</li><li>Nine</li>
    </ol>
</body>
</html>