I am encountering an issue with counter-reset() when introducing a div between the initial declaration and the reset.
Initially, I had structured my code like this, with headings directly under the numberedHeadings class:
Now, there is a need to wrap each heading tag in an additional div container like so:
.numberedHeadings {
counter-reset: heading1counter 0 heading2counter 0 heading3counter 0 heading4counter 0;
}
.numberedHeadings h1.chapterHeading {
counter-reset: heading2counter 0 heading3counter 0 heading4counter 0;
counter-increment: heading1counter;
margin-top: 24px;
margin-bottom: 12px;
}
.numberedHeadings h1.chapterHeading::before {
display: inline-block;
padding-right: 8px;
content: counter(heading1counter) " ";
}
/* Similar adjustments repeated for h2, h3, and h4 */
/* Example for h2 */
.numberedHeadings h2.chapterHeading {
counter-reset: heading3counter 0 heading4counter 0;
counter-increment: heading2counter;
margin-top: 24px;
margin-bottom: 12px;
}
.numberedHeadings h2.chapterHeading::before {
display: inline-block;
padding-right: 8px;
content: counter(heading1counter) "." counter(heading2counter) " ";
}<div class="numberedHeadings">
<div class="settingsControlGroup">
<h1 id="id-7adcf781-0be8-4536-8dd9-89d4553850cf" class="chapterHeading">
Heading one (should be 1)
</h1>
</div>
<div class="settingsControlGroup">
<h2 id="id-7adcf781-0be8-4536-8dd9-89d4553850cf" class="chapterHeading">
Heading two (should be 1.1)
</h2>
</div>
<div class="settingsControlGroup">
<h1 id="id-7adcf781-0be8-4536-8dd9-89d4553850cf" class="chapterHeading">
Heading three (should be 2)
</h1>
</div>
<div class="settingsControlGroup">
<h2 id="id-7adcf781-0be8-4536-8dd9-89d4553850cf" class="chapterHeading">
Heading four (should be 2.1)
</h2>
</div>
<div class="settingsControlGroup">
<h2 id="id-7adcf781-0be8-4536-8dd9-89d4553850cf" class="chapterHeading">
Heading five (should be 2.2)
</h2>
</div>
<div class="settingsControlGroup">
<h1 id="id-7adcf781-0be8-4536-8dd9-89d4553850cf" class="chapterHeading">
Heading 6 (should be 3)
</h1>
</div>
<div class="settingsControlGroup">
<h1 id="id-7adcf781-0be8-4536-8dd9-89d4553850cf" class="chapterHeading">
Heading 7 (should be 4)
</h1>
</div>
<div class="settingsControlGroup">
<h1 id="id-7adcf781-0be8-4536-8dd9-89d4553850cf" class="chapterHeading">
Heading 8 (should be 5)
</h1>
</div>
</div>However, upon doing this, I notice that while the counter-increment() is working as expected, the counter-reset() is not being applied.