【CSS】特定の子要素を含まない要素を指定する方法

親要素や兄要素を指定する has セレクタ

:has は疑似クラスで、:has が登場する前までは指定できなかった、参照している要素の親要素や前の兄弟要素 (兄要素) を指定できます。

<div class="border-box">
  <div>
    <p>div タグを直下に含んだ親要素の背景をグレーにする</p>
  </div>
</div>
<div class="border-box">
  <p>div タグ直下に含まない親要素の背景はグレーにならない</p>
</div>

div.border-box:has(> div) {
  background: #c0c0c0;
}

has と not を併用する

今回は has を使って隣接する要素に特定の要素が含まれていない場合の指定方法を説明します。

特定のタグにのみデザインを適用する

例えば、div タグの直下に img タグが含まれていない場合のみ背景色を適用します。

<div class="border-box">
  <p>img タグが直下に無い場合のみ背景をグレーにする</p>
</div>
<div class="border-box">
  <img src="/img/xxx.webp" /> <!-- img タグが直下にある場合は背景がグレーにならない -->
</div>

div.border-box:has(> :not(img)) {
  background: #c0c0c0;
}