【CSS】 「～を持たない」を「:not」「:has」で実装する

こんにちは、さち です。

先日、ユーザーCSS を書いているときに、「～を持つ」は :has() で実装できるけど「～を持たない」はどうすればできるんだろうと悩んでしまいました。

結果的に、既存の CSS :not() :has() で実装する書き方があったので、備忘録を残しておきます。

やりたいこと

HTML

<div>
  <h1 class="miss">Miss</h1>
  <p>ダメです</p>
</div>

<div>
  <h1 class="good">Good</h1>
  <p>イイね</p>
</div>

<div>
  <h1 class="awesome">Awesome</h1>
  <p>サイコーかよ</p>
</div>

この HTML で .miss を持たない <div> 要素の「背景色」をオレンジ色にしたいです。（下記サンプルを参照）

望んでいる結果

実装方法

HTML

<div>
  <h1 class="miss">Miss</h1>
  <p>ダメです</p>
</div>

<div>
  <h1 class="good">Good</h1>
  <p>イイね</p>
</div>

<div>
  <h1 class="awesome">Awesome</h1>
  <p>サイコーかよ</p>
</div>

CSS

div:not(:has(.miss)) {
  background: orange;
}

:not() の中に :has() をネスト（入れ子）することで、「～を持たない」という効果の CSS になります。

上記の CSS の場合、.miss を持たない <div> に適用されます。

実装結果