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

この記事は約2分で読めます。
記事内に広告が含まれています

コーディングのイメージ

こんにちは、さち です。

先日、ユーザー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> に適用されます。

実装結果

サンプル

コメント

タイトルとURLをコピーしました