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?