I have multiple HTML files that have a different order of pages. Some have a new page starting before the preface while others have just a preface.

HTML with new page

<div class="copyright">
... copyright elements
    <div class="newPageClass"></div>
</div>
<div class="preface"></div>

HTML without

<div class="copyright">
... copyright elements
</div>
<div class="preface"></div>

I need to reset the page count on .newPageClass or preface exclusively.
Testing out selector specificity I determined that any counter-reset: page 1; is triggered regardless of it's location in the CSS.
Ex.

 
div.preface {
	counter-reset: page 1;
}

div.copyright div.newPageClass {
	counter-reset: page 1;
}

Which make sense since `div.preface` comes after `div.copyright div.newPageClass` in the HTML.
Is there a way to conditionally reset a page counter for such a scenario? I would prefer to avoid having to run a JS script before to manipulate the dom.

Perhaps you can add a class to div.copyright so that only one of these would trigger?

div.copyright .newPageClass { counter-reset: page 1 }
div.copyright.noNewPageClass + div.preface { counter-reset: page 1 }