CSS заменить предыдущий соседний селектор

Question

Существует два варианта div:

<div class="parent">
   <span>some stuff</span>
   <div>Important element</div>
   <div class="unit">xxx</div>
</div>

и:

<div class="parent">
   <span>some stuff</span>
   <div>Important element</div>
</div>

Какой будет рабочий селектор CSS для элемента Important <div>, только если .unit <div> присутствует в .parent <div>? В этом случае я хочу применить некоторое форматирование. К сожалению, .unit идет после другого div, и я не могу выбрать предыдущий элемент.

Спасибо

Answer 1

nth-last-child - это то, что вы хотите, предполагая, что у вас всегда будут варианты, которые вы показываете.

.parent > :nth-last-child(2):nth-child(2) {
  color:red;
}

.parent {
  border:1px solid;
  margin:5px;
}

<div class="parent">
   <span>some stuff</span>
   <div>Important element</div>
   <div class="unit">xxx</div>
</div>

<div class="parent">
   <span>some stuff</span>
   <div>Important element</div>
</div>

Answer 2

.parent {
  border: 1px solid blue;
  margin: .5em;
  padding: .5em;
}

.parent > div:not(.unit):last-child {
  color: red;
}

<div class="parent">
   <span>some stuff</span>
   <div>Important element</div>
   <div class="unit">xxx</div>
</div>

<div class="parent">
   <span>some stuff</span>
   <div>Important element</div>
</div>