Примените стиль к последнему дочернему элементу родителя, только если существует определенный дочерний элемент

Question

У меня есть некоторый HTML, который выглядит следующим образом:

<div class="parent">
    <div class="child"></div>
</div>
<div class="parent">
    <div class="child"></div>
</div>
<div class="parent">
    <div class="child"></div>
</div>

child может отображаться или не отображаться в html, parent всегда будет отображаться.У меня есть CSS, как это:

  .parent {
    page-break-after: always;
  }

  .parent:last-child {
    page-break-after: avoid;
  }

Это работает не совсем правильно.Я хотел бы применить page-break-after: always; только к parent s, которые имеют child и page-break-after: avoid; к последнему родителю с элементом child.Так, например, если HTML отображается так:

<div class="parent">
    <div class="child"></div>
</div>
<div class="parent">
    MISSING
</div>
<div class="parent">
    <div class="child"></div>
</div>

page-break-after: always; должен идти на первом и третьем parent, а page-break-after: avoid должен идти на последнем parent.

Если это выглядит так:

<div class="parent">
    <div class="child"></div>
</div>
<div class="parent">
    <div class="child"></div>
</div>
<div class="parent">
    MISSING
</div>

page-break-after: always; должен идти на первом и втором parent, а page-break-after: avoid должен идти на втором parent.

Есть ли способ сделать это с помощью селекторов CSS?Важно, что это работает правильно в браузерах MS Edge и IE 11.Я использую Angular 6, если это имеет значение.