Существует ли селектор "предыдущий брат"?

Ваш вопрос касается выбора предыдущих и следующих элементов-«соседей» для элемента, на который наведён курсор. Вы уже использовали решение от @Quentin для выбора предыдущих «соседей». Давайте разберёмся, как это можно сделать.

Чтобы выбрать предыдущие два элемента при наведении на текущий, вы можете воспользоваться селектором :has() и ~, как показано в примере ниже:

.child {
    width: 25px;
    height: 25px;
}

.child:hover {
    background: blue;
}

/* Выбор всех предыдущих элементов при наведении */
.child:has(~ .child:hover) {
    background: red;
}

В этом коде, когда вы наводите курсор на child, он становится синего цвета, а все предыдущие элементы окрашиваются в красный.

Если вам также нужно выбрать два следующих элемента после наведения на текущий, вы можете реализовать это с помощью следующего кода:

.child {
    width: 25px;
    height: 25px;
}

.child:hover {
    background: blue;
}

.child:hover + .child {
    background: red; /* Первый следующий элемент */
}

.child:hover + .child + .child {
    background: green; /* Второй следующий элемент */
}

Таким образом, вы сможете выделить два предыдущих элемента (посредством :has(~ .child:hover)) и два следующих элемента (при помощи +). Ваш HTML не требует изменений:

<ul class="parent">
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
</ul>

Таким образом, комбинируя эти селекторы, вы сможете достичь желаемого эффекта выбора как предыдущих, так и следующих элементов при наведении.

У меня был такой же вопрос, но потом у меня случился момент "ну, конечно". Вместо того чтобы писать

x ~ y

попробуйте написать

y ~ x

Несомненно, это будет соответствовать "x", а не "y", но это отвечает на вопрос "есть ли совпадение?", и простой обход DOM может привести вас к нужному элементу более эффективно, чем цикл в JavaScript.

Я понимаю, что изначально это был вопрос о CSS, поэтому мой ответ может быть совершенно неуместным, но другие пользователи JavaScript могут наткнуться на этот вопрос через поиск, как это произошло у меня.

В ответ на ваш вопрос о том, как можно изменить порядок элементов с помощью CSS, вот три интересных приема:

1. Использование CSS Flex и direction: row-reverse

С помощью свойства flex-direction: row-reverse можно изменить порядок отображения флекс-элементов:

.reverse {
  display: inline-flex;
  flex-direction: row-reverse;
}
.reverse span:hover ~ span { /* При наведении на SPAN целим в "предыдущие" элементы */
  background: gold;
}

Наведите курсор на SPAN, и вы увидите изменение стилей предыдущих элементов!<br>

<div class="reverse">
  <!-- Обратный порядок внутренних элементов -->
  <span>5</span>
  <span>4</span>
  <span>3</span>
  <span>2</span>
  <span>1</span>
</div>

2. Использование Flex с direction: RTL

Свойство direction: rtl позволяет также изменить порядок элементов:

.reverse {
  display: inline-flex;
  direction: rtl;
}
.reverse span:hover ~ span { /* При наведении на SPAN целим в "предыдущие" элементы */
  background: red;
}

Наведите курсор на SPAN, и вы увидите изменение стилей предыдущих элементов!<br>

<div class="reverse">
  <!-- Обратный порядок внутренних элементов -->
  <span>5</span>
  <span>4</span>
  <span>3</span>
  <span>2</span>
  <span>1</span>
</div>

3. Использование float right

С помощью свойства float: right можно достигнуть аналогичного эффекта:

.reverse { 
  display: inline-block;
}
.reverse span {
  float: right; 
}
.reverse span:hover ~ span { /* При наведении на SPAN целим в "предыдущие" элементы */
  background: red;
}

Наведите курсор на SPAN, и вы увидите изменение стилей предыдущих элементов!<br>

<div class="reverse">
  <!-- Обратный порядок внутренних элементов -->
  <span>5</span>
  <span>4</span>
  <span>3</span>
  <span>2</span>
  <span>1</span>
</div>

Эти методы позволяют вам легко изменить порядок отображаемых элементов и добавить интерактивность с помощью CSS. Выберите тот, который лучше всего соответствует вашим потребностям!

Вы можете использовать два селектора предыдущих соседей в библиотеке CSS post-processor axe: ! и ?.

В стандартном CSS есть 2 селектора последующих соседей:

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

Однако в стандартном CSS нет селектора предыдущего соседа.

В библиотеке CSS axe присутствуют 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>Наведите курсор на любой из блоков ниже</h2>

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

<div class="immediate-previous">Наведите курсор для селектора <code>?</code></div>
<div class="any-previous">Наведите курсор для селектора <code>!</code></div>
<div class="any-subsequent">Наведите курсор для селектора <code>~</code></div>
<div class="immediate-subsequent">Наведите курсор для селектора <code>+</code></div>

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

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

В 2023 году произошли изменения, и теперь существует такой селектор:

// 1 элемент перед
:has(+ .item:hover) {
    ...
}

Если вам нужно выбрать 3 элемента перед, то вам следует использовать такой код:

// 3 элемента перед
:has(+ .item:hover),
:has(+ .item + .item:hover),
:has(+ .item + .item + .item:hover) {
    ...
}

Вы можете увидеть мой пример по этой ссылке: https://codepen.io/ro31337/pen/YzJbEZv