How to use css counters in nested lists without parent index while not using a separate counter for each level

My code example:

.list {
    counter-reset: section;                
}

.item::before {
    counter-increment: section;             
    content: counters(section, ".") '. ';   
}

.list .list .item {
    margin-left: 30px;
}

<div class='list'>
      <div class='item'>item</div>        
      <div class='item'>item              
        <div class='list'>
          <div class='item'>item</div>     
          <div class='item'>item</div>     
          <div class='item'>item </div>
 
        </div>
      </div>
      <div class='item'>item</div>         
      <div class='item'>item</div>         
    </div>

The above code outputs：

1. item
2. item
   2.1. item
   2.2. item
   2.3. item
3. item
4. item

I want the child items not to have a parent index, like the following:

1. item
2. item
   1. item
   2. item
   3. item
3. item
4. item

I am aware that this can be achieved with a separate counter for each level, but then you need to write out the CSS for each counter. In my real use case, there are unpredictable levels and I don’t control the HTML. There could be 50 levels and I can’t possibly write out all the 50 sets of CSS rules. That’s why I use the counters() function, which handles multiple levels automatically. The question is, the counters() function comes with the parent index. Is it possible at all to get rid of it?

If pure CSS can’t do it, can we do it with the help of JS?

Answer

Looks funny, but you might use counter() not counters():

.list {
  counter-reset: section;
}

.item::before {
  counter-increment: section;
  content: counter(section) '. ';
}

.list .list .item {
  margin-left: 30px;
}

<div class='list'>
  <div class='item'>item</div>
  <div class='item'>item
    <div class='list'>
      <div class='item'>item</div>
      <div class='item'>item
        <div class='list'>
          <div class='item'>item</div>
          <div class='item'>item</div>
          <div class='item'>item </div>

        </div>
      </div>
      <div class='item'>item </div>

    </div>
  </div>
  <div class='item'>item</div>
  <div class='item'>item</div>
</div>

BTW, it’s weird to make lists with <div>s when <ul> and <ol> are available and intended exactly for that purpose.

Advertisement

Answer