:has()を使って前の兄弟要素を選択する

Selecting Previous Siblingsで:has()擬似クラスを使って、前の兄弟要素を選択する方法が紹介されていた。

<section>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  ...
</section>

/* マウスオーバーした要素 */
.item:hover {

  /* マウスオーバーした次の兄弟要素 */
  & + .item {}

  /* マウスオーバーした次の次兄弟要素 */
  & + .item + .item {}

  /* マウスオーバーした前の兄弟要素 */
  :has(+ &) {}
  /* = :has(+ .item:hover) */

  /* マウスオーバーした前の前の兄弟要素 */
  :has(+ .item + &) {}
  /* = :has(+ .item + .item:hover) */
}

:has(+ &)は、「マウスオーバーした要素（&）が次にくる要素」を指している。正規表現の肯定先読みのようなもの。

デモ