Элементы подсчета Css и счетчик сброса, когда у кого есть класс

Question

Я пытаюсь подсчитать элементы, которые не являются обычным списком.

Легче объяснить в коде: Fiddle

У меня нет больше или меньше никакого контроля над HTML.

---

Вместо DOM выглядеть следующим образом:

<div class="body"> 
    <div><p class="numlist" >first text</p></div> 
    <div><p class="numlist">second text</p></div> 
    <div><p class="numlist">third text</p></div> 
    <!-- Only here for only here in demonstrative purpose --> 
    <div class="should-reset"><p>Start a new counter for the inlines</p></div> 
    <div><p class="numlist depth">first text</p></div> 
    <div><p class="numlist depth">second text</p></div> 
    <div><p class="numlist depth">third text</p></div> 
    <!-- Only here for only here in demonstrative purpose --> 
    <div class="should-reset"><p>Want to reset the standard counter</p></div> 
    <div><p class="numlist reset" >first text</p></div> 
    <div><p class="numlist">second text</p></div> 
    <div><p class="numlist">third text</p></div>  
</div> 

В результате я хочу что-то вроде этого:

1. list one 
2. list one 
3. list one 
    1. list two 
    2. list two 
    3. list two 
1. list three 
2. list three 
3. list three  

Но список три всегда получается так, как счетчик никогда не сбрасывается :

1. list three 
4. list three 
5. list three  

Answer 1

Почему вы просто не используете теги <ol>?

Замечание/добавление: Это требование было добавлено к вопросу после того, как я отправил свой ответ: «У меня более или менее нет контроля над html».

.inset { 
 
    margin-left: 20px; 
 
}

<ol> 
 
    <li> 
 
    first text 
 
    </li> 
 
    <li> 
 
    second text 
 
    </li> 
 
    <li> 
 
    third text 
 
    </li> 
 
    </ol> 
 

 
    <ol class="inset"> 
 
    <li> 
 
     first text 
 
    </li> 
 
    <li> 
 
     second text 
 
    </li> 
 
    <li> 
 
     third text 
 
    </li> 
 
    </ol> 
 
    
 
    <ol> 
 
    <li> 
 
     first text 
 
    </li> 
 
    <li> 
 
     second text 
 
    </li> 
 
    <li> 
 
     third text 
 
    </li> 
 
    </ol>

Answer 2

.body { 
 
    counter-reset: standard; 
 
} 
 

 
.should-reset { 
 
    counter-reset: standard; 
 
    color: red; 
 
} 
 

 
.numlist::before { 
 
    counter-increment: standard; 
 
    content: counter(standard) ". "; 
 
} 
 

 
.numlist.depth::before { 
 
    margin-left: 50px; 
 
}

<div class="body"> 
 
    <div><p class="numlist" >first text</p></div> 
 
    <div><p class="numlist">second text</p></div> 
 
    <div><p class="numlist">third text</p></div> 
 
    <div class="should-reset"><p>Start a new counter for the inlines</p> </div> 
 
    <div><p class="numlist depth" depth>first text</p></div> 
 
    <div><p class="numlist depth" depth>second text</p></div> 
 
    <div><p class="numlist depth" depth>third text</p></div> 
 
    <div class="should-reset"><p>Want to reset the standard counter</p> </div> 
 
    <div><p class="numlist" >first text</p></div> 
 
    <div><p class="numlist">second text</p></div> 
 
    <div><p class="numlist">third text</p></div> 
 
</div>

UPD:

.body { 
 
    counter-reset: standard; 
 
} 
 

 
.body div:nth-child(3n + 1) { 
 
    counter-reset: standard; 
 
} 
 

 
.numlist::before { 
 
    counter-increment: standard; 
 
    content: counter(standard) ". "; 
 
} 
 

 
.numlist.depth::before { 
 
    margin-left: 50px; 
 
}

<div class="body"> 
 
    <div><p class="numlist reset" >first text</p></div> 
 
    <div><p class="numlist">second text</p></div> 
 
    <div><p class="numlist">third text</p></div> 
 
    <div><p class="numlist depth" depth>first text</p></div> 
 
    <div><p class="numlist depth" depth>second text</p></div> 
 
    <div><p class="numlist depth" depth>third text</p></div> 
 
    <div><p class="numlist" >first text</p></div> 
 
    <div><p class="numlist">second text</p></div> 
 
    <div><p class="numlist">third text</p></div> 
 
</div>