CSSセレクタのhasが便利すぎる件

2025年2月19日

hasというものを使うことによりこれまでjavascriptを使用しなければできなかったことがcssのみで実現できるようになったということで少し前に話題になっていた(といってももう２，３年くらい前)ので紹介します。

Contents

要約

・hasは親要素に影響を与えられるなやつ

・jsでロジックを組んでいたことがCSSのみで実現！

一言でいうと、親要素に影響を与えられるやつです。

親要素が子要素の状態を判定することにより、適用するスタイルを場合分けできます。

例えば、「子要素に <img> がある場合、親の <div> の背景を変更」する場合を見てみましょう。

従来：

document.querySelectorAll("div").forEach(
  div => { 
    if (div.querySelector("img")) {
      div.style.backgroundColor = "yellow"; 
    } 
  }
);

以下のようなことをやってます

hasの場合：

div:has(img) {
  background-color: yellow;
}

hasを使うと簡単ですねｗ

Chrome・Edge・Safariでは2022年の段階で対応しており、2023年12月19日にFirefoxでもサポートされるようになったみたいです。つまりすべての主要ブラウザで使用できます。

これまで、やりたいことの割には複雑な実装が必要だったことが、hasで大幅に減ったのではないでしょうか？これからは安易にjsでロジックを組むのではなく、hasを意識的に使うようにしていきたいですね。

Posted by ロク