CSSの:has()を使ってみる

CSSの疑似クラスの:has()を簡単に使ってみます。

対応ブラウザ

:has()の対応ブラウザはこちら
IE以外の主要ブラウザで対応していますが、Firefoxはバージョン121(2023年12月19日リリース)からの対応、chromeはバージョン105(2022年8月30日リリース)からの対応、Safariはバージョン15.4(2022年3月14日リリース)からの対応となっているので、対応ブラウザの範囲によっては注意が必要です。

サンプルコード

:has()はその要素から辿って、引数に設定したセレクターがある場合にスタイルを適用する擬似クラスです。

<section class="section">
  <h3 class="section_heading">section_heading</h3>
  <p class="section_lead">section_lead</p>
</section>
<section class="section">
  <h3 class="section_heading">section_heading</h3>
</section>
<section class="section">
  <p class="section_lead">section_lead</p>
</section>

:has()の設定をいくつか試してみます。

/* .section の中に .section_heading がある時に、.section にスタイルを適用  */
.section:has(.section_heading) {
	border: orange 2px solid;
}

/* .section の中の .section_lead にホバーした時に、.section にスタイルを適用  */
.section:has(.section_lead:hover) {
	background: aqua;
}

/* .section_heading の直後に .section_lead がある時に、.section_heading にスタイルを適用  */
.section_heading:has(+ .section_lead) {
	color: pink;
}

設定内容はコメントに記載している通りですが、要素内の状態などに応じて要素のスタイルを設定することができます。
:has()のデモページ

引数にはカンマ区切りでセレクタを複数指定することもでき、その場合はセレクタのうちどれか1つでも条件に合っていればスタイルが適用されます。
どれか一つではなく全てのセレクタが条件に合っている場合としたい場合、:has()を連結して使用することで設定できます。

/* .section の中に .section_heading または .section_lead がある時に、.section にスタイルを適用  */
.section:has(.section_heading, .section_lead) {
	border: orange 2px solid;
}
/* .section の中に .section_heading と .section_lead の両方がある時に、.section にスタイルを適用  */
.section:has(.section_heading):has(.section_lead) {
	color: pink;
}

:has()のデモページ2