+ для следующего брата. Есть ли эквивалент для предыдущего брата?

Вы можете использовать два селектора ax : ! и ?

Там 2 следующие селекторные функции для сиблинга в обычном CSS:

• + является непосредственным последующим селектором сиблинга
• ~ является любым последующим селектором сиблинга

. В обычном CSS нет предыдущего селектора sibling.

Однако в ax CSS послепроцессорной библиотеки есть 2 предыдущие селекторные функции:

• ? - это предыдущий селектор немедленного (напротив +)
• ! является любым предыдущим селектором (см. ~)

Рабочий пример:

В следующем примере:

• .any-subsequent:hover ~ div выбирает любой последующий div
• .immediate-subsequent:hover + div выбирает немедленный последующий div
• .any-previous:hover ! div выбирает любой предыдущий div
• .immediate-previous:hover ? div выбирает непосредственный предыдущий div

div {
  display: inline-block;
  width: 60px;
  height: 100px;
  color: rgb(255, 255, 255);
  background-color: rgb(255, 0, 0);
  text-align: center;
  vertical-align: top;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

code {
  display: block;
  margin: 4px;
  font-size: 24px;
  line-height: 24px;
  background-color: rgba(0, 0, 0, 0.5);
}

div:nth-of-type(-n+4) {
  background-color: rgb(0, 0, 255);
}

div:nth-of-type(n+3):nth-of-type(-n+6) {
  opacity: 1;
}

.any-subsequent:hover ~ div,
.immediate-subsequent:hover + div,
.any-previous:hover ! div,
.immediate-previous:hover ? div {
  opacity: 1;
}

<h2>Hover over any of the blocks below</h2>

<div></div>
<div></div>

<div class="immediate-previous">Hover for <code>?</code> selector</div>
<div class="any-previous">Hover for <code>!</code> selector</div>
<div class="any-subsequent">Hover for <code>~</code> selector</div>
<div class="immediate-subsequent">Hover for <code>+</code> selector</div>

<div></div>
<div></div>

<script src="https://rouninmedia.github.io/axe/axe.js"></script>