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