CSSの:has()擬似クラス関数で兄弟要素のスタイルを変更してみる

はじめに

今回は特定のリンクにマウスオーバーした際に隣接する兄弟要素のスタイルをCSSの:has()擬似クラス関数を利用して変更してみます。
ブラウザのサポート状況（Can I use）

CSSの:has()擬似クラス関数

擬似クラス関数の:has()は引数で渡されたセレクターにマッチする要素に対してスタイルを適用します。

See the Pen :has() by KAZUKI YOKOUCHI (@tone-design) on CodePen.

MDN Web Docs

:has() - CSS: カスケーディングスタイルシート | MDN

https://developer.mozilla.org/ja/docs/Web/CSS/:has

【デモ】マウスオーバー時のスタイルに応用する

下のサンプルは特定のリンクにマウスオーバーした際に、兄弟要素のリンクのスタイルを変更しています。
サンプルでは透明度を下げています。マウスオーバーした要素のみを目立たせたい場合に便利そうです。

See the Pen Untitled by KAZUKI YOKOUCHI (@tone-design) on CodePen.

下記CSSが兄弟要素のスタイルを変更している部分です。
.listクラスを持つ要素内のa要素がホバー状態の時に、.list__itemクラスの要素内のa要素にスタイルを適用します。
透明度を40%(0.4)に設定しています。

.list:has(a:hover) .list__item a {
  opacity: 0.4;
}

マウスオーバー時の兄弟要素のスタイル変更はJavaScript（jQuery）を利用することが多かったですが、:has()を利用してCSSのみでもできそうなので、今後は利用が増えそうです。