こんにちは、さち です。
先日、ユーザー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>
に適用されます。
実装結果
サンプル
コメント