I've got some HTML that looks like this:
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
The child may or may not be rendered in the html, the parent will always be rendered. I've got CSS like this:
.parent {
page-break-after: always;
}
.parent:last-child {
page-break-after: avoid;
}
This isn't working quite right. I'd like to apply page-break-after: always; only on parents that have a child and page-break-after: avoid; to the last parent with a child element. So for example, if the html is rendered like this:
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
MISSING
</div>
<div class="parent">
<div class="child"></div>
</div>
The page-break-after: always; should go on the first and third parent, and the page-break-after: avoid should go on the last parent.
If it looks like this:
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
MISSING
</div>
The page-break-after: always; should go on the first and second parent, and the page-break-after: avoid should go on the second parent.
Is there a way to do this with CSS selectors? It's important that this works correctly in MS Edge and IE 11 browsers. I'm using Angular 6, if that matters.
