ちょっと株式会社 社員ブログ
Blog擬似クラスの:has()に期待
.png?w=760&h=506&fm=webp)
SHARE
個人的にずっとこんなのが欲しい。と思っていた:has()。
CSS4で追加されるものなので現場ではまだ使えないですが、とにかく私は期待している擬似クラスです。
:hasクラスって何ができる?
擬似クラスとはa:hoverなどでよく使うと思いますが、a要素がhoverの時。と特定の状態について指定できます。
擬似クラスについてはこちらに詳しく書かれています。
https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes
:has()は一体どのような状態について指定できるのか。ですが、jQueryを使ったことがある方はあのhas?と思うかと思います。そのhasです。
:has()を使えるようになると親要素に対して指定できるようになります。
例えばaタグの中にimgがあるものだけスタイルを追加したい。という時に
a:has(>img)
とかけるようになります。
今までは親要素のスタイルを調整するには、jQueryなどで指定できましたが、これがCSSのみで指定できるようになります。
親要素に対して指定したいことって結構あるのになんでCSSだけでできないんだろう。とほんと思っていたので、:has()を使える日が待ち遠しいです。
:has() - MDN Web Docs
https://developer.mozilla.org/ja/docs/Web/CSS/:has