CSS counter не работает в подпунктах внутри div

Question

Я пытаюсь использовать счетчик CSS для создания номеров глав. Как видно из приведенного ниже примера, он работает правильно, если я имею дело с классами внутри контейнера, но не работает, когда я пытаюсь использовать его в подпунктах внутри div. Есть идеи, как исправить это поведение? (Мне нужно использовать такую ​​структуру)

.itemsContainer {
  counter-reset: section;
}

.t1 {
  counter-reset: subsection;
}

.t1:before {
  counter-increment: section;
  content: counter(section) ". ";
}

.t2:before {
  counter-increment: subsection;
  content: counter(section) "."counter(subsection) " ";
}

<h3>Direct access to class</h3>
<div class="itemsContainer">
  <p class="t1"></p>
  <p class="t2"></p>
  <p class="t2"></p>
</div>

<h3>Inside div</h3>
<div class="itemsContainer">
  <div class="item">
    <p class="t1"></p>
  </div>
  <div class="item">
    <p class="t2"></p>
  </div>
  <div class="item">
    <p class="t2"></p>
  </div>
</div>

Answer 1

Ошибка здесь исходит из правила:

.itemsContainer {
  counter-reset: section;
}

Так что каждый раз, когда у вас есть элемент .itemsContainer, счетчик section будет сбрасываться.

Чтобы избежать этого просто скажите, что только элемент first .itemsContainer сбрасывает счетчик:

.itemsContainer:nth-of-type(1) {
  counter-reset: section;
}

Для части "Inside div" вам нужно увеличить subsection с помощью .item и не .item .t2. Не забывайте, что первый элемент не должен увеличивать счетчик. В css вы можете использовать свойство :not() для этого:

.item:not(:first-child) {
  counter-increment: subsection;
}

Пожалуйста, проверьте демо:

.itemsContainer:nth-of-type(1) {
  counter-reset: section;
}

.itemsContainer .t1 {
  counter-reset: subsection;
}

.t1::before {
  counter-increment: section;
  content: counter(section) ". ";
}

.item:not(:first-child) {
  counter-increment: subsection;
}

.itemsContainer>.t2::before {
  counter-increment: subsection;
  content: counter(section) "."counter(subsection) " ";
}

.itemsContainer>.item>.t2::before {
  content: counter(section) "."counter(subsection) " ";
}

<h3>Direct access to class</h3>
<div class="itemsContainer">
  <p class="t1"></p>
  <p class="t2"></p>
  <p class="t2"></p>
</div>

<h3>Inside div</h3>
<div class="itemsContainer">
  <div class="item">
    <p class="t1"></p>
  </div>
  <div class="item">
    <p class="t2"></p>
  </div>
  <div class="item">
    <p class="t2"></p>
  </div>
</div>

Для получения дополнительной информации просто просмотрите документацию W3 C: https://www.w3schools.com/CSS/css_counters.asp