Можно ли написать такой селектор, который будет реагировать на НЕ вложенные элементы при псевдоклассах?

Question

[stan288]

Для примера есть такой код. Можно ли чтобы по наведению на block-1 цвет менялся у block-2? Или тут только mouseover поможет и без js не обойтись?

<div class="block-1"></div>
<div class="block-2"></div>

.block-1 {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: #000;
}
.block-1:hover block-2 {
  background-color: #000;
}
.block-2 {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: #e1e1e1;
}

Answer 1

[RAX7]

.block-1:hover + .block-2 {
  background-color: #000;
}

Comments

[stan288]

Спасибо. А если например block-2 стоит до block-1 в нашем примере? Такой слектор не получится написать?

[RAX7]

Нет, такой не получится. В css есть комбинаторы для последующих элементов, но нет для предыдущих
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

[Сергей delphinpro]

RAX7,

Нет, такой не получится.

Я бы не делал таких категоричных утверждений =))

<div class="outer">
  <div class="block-2"></div>
  <div class="block-1"></div>
</div>

.outer:has(.block-2 + .block-1:hover) > .block-2 {
  background: black;
}

PS. В FF до сих пор не работает, если не включены экспериментальные возможности.

[Rsa97]

RAX7, В принципе, уже есть :has. Но пока не во всех браузерах
.block-2:has(~ .block-1:hover)
В хроме уже работает, в огнелисе пока нет.

[RAX7]

Сергей delphinpro, Rsa97, про :has я даже не вспомнил, но да, оказывается уже может получиться =)

[Сергей delphinpro]

А если речь только о двух элементах (частный случай), то тут можно и без :has обойтись. Просто реверснуть flex поток.

Answer 2

[Rsa97]

.block-1:hover + .block-2 - непосредственно следующий блок
.block-1:hover ~ .block-2 - все следующие сиблинги