Как обратиться к соседним селекторам?

Question

[hesrun]

<div class="list">
           <div class="list__item"></div>
           <div class="list__item"></div>
           <div class="list__item"></div>
           <div class="list__item"></div>
           <div class="list__item"></div>
           <div class="list__item"></div>
     </div>

Есть такой список. Хочу при ховере на среднем чтоб применялись стили на предыдущих и на следующих.
К последующим вопросов нету, а вот предыдущие
В ютубчике недавно видел реализация на чистом с помощью :has или :not, не могу найти тот видос...
Может кто помнит в чем там магия заключалась?

Answer 1

[Виталий Першин]

Можно проще:

Comments

[Сергей delphinpro]

не рановато :has использовать на полную? В FireFox поддержка появилась только пару месяцев назад (в декабре 2023)

[Виталий Першин]

Сергей delphinpro,
Лично я думаю что рановато, есть альтернативные решения.
Как раз на эту тему недавно видео записал

Без has :
https://codepen.io/pershinvitalii/pen/gOEdYbj
https://codepen.io/pershinvitalii/pen/MWxqJMX
https://codepen.io/pershinvitalii/pen/ZEPMaxr
https://codepen.io/pershinvitalii/pen/MWxqOqQ

С has:
https://codepen.io/pershinvitalii/pen/rNRrXLb
https://codepen.io/pershinvitalii/pen/JjzBgvX
https://codepen.io/pershinvitalii/pen/gOEjVzo

[cssfish]

ветка FF esr вообще на 115 версии сейчас вместо 122 и там Has тоже нет
так что да, рановато это все еще

Answer 2

[hesrun]

https://codepen.io/smashingmag/pen/rNrpymj вопрос снят...

Comments

[Rustam Bainazarov]

Отмечайте решением, даже если сам нашли, можно несколько ответов сразу.