cssの疑似クラス :has()の使い方

MARKLEAPS

2023.11.13

CSSの比較的新しい疑似クラス:has()の使い方についてまとめました。

:has()

:has()は、「A:has(B)」のように指定し、Bの条件を満たすAに対してCSSを適用できます。

まずは以下のサンプルを見てみましょう。

使用例 1：Bを持つAに対しスタイルを適用する

画像（.news_image）を持つli要素だけflexで横並びにする

.news_list li:has(.news_image) {
	display: flex;
	align-items: center;
}

.news_list li:has(.news_image) {

display: flex;

align-items: center;

}

<ul class="news_list">
  <li>
      <div class="news_image">
          <img src="images/image.jpg" alt="" />
      </div>
      <div class="news_content">
          <h3>記事タイトル</h3>
          <p>テキストが入ります。</p>
      </div>
  </li>
  <li>
      <div class="news_content">
          <h3>記事タイトル</h3>
          <p>テキストが入ります。</p>
      </div>
  </li>
</ul>

<li>

</div>

<h3>記事タイトル</h3>

<p>テキストが入ります。</p>

</div>

</li>

<li>

<h3>記事タイトル</h3>

<p>テキストが入ります。</p>

</div>

</li>

</ul>

使用例 2：Aの後にBが続く場合にスタイルを適用する

タイトルの下に、サブタイトルがある場合と無い場合があり、
サブタイトルがない場合のみ下余白をなくす。

h2 {margin-bottom: 20px;}
h2:has(+ h3) {margin-bottom: 0px;}

1 2	h2 {margin-bottom: 20px;} h2:has(+ h3) {margin-bottom: 0px;}

<div>
    <h2>Title</h2>
    <h3>Sub-Title</h3>
    <p>テキストが入ります。</p>
</div>

<div>
    <h2>Title</h2>
    <p>テキストが入ります。</p>
</div>

<div>

<h2>Title</h2>

<h3>Sub-Title</h3>

<p>テキストが入ります。</p>

</div>

<div>

<h2>Title</h2>

<p>テキストが入ります。</p>

</div>

使用例 3：フォームの状態の変化に応じてスタイルを適用する

フォームの選択肢から「その他」を選択した場合のみ、自由記述欄を表示する。

.other_reason {
	display: none;
}
:has(input[value="other"]:checked) .other_reason {
	display: block;
}

.other_reason {

display: none;

}

:has(input[value="other"]:checked) .other_reason {

display: block;

}

<form>
  <dl>
      <dd><input name="radio1" type="radio" value="choice1" />選択肢1　<input name="radio1" type="radio" value="choice2" />選択肢2　<input name="radio1" type="radio" value="other" />その他</dd>
  </dl>
  <dl class="other_reason">
      <dd><input name="" type="text" placeholder="" value=""></dd>
  </dl>
</form>