chot Inc.

ちょっと株式会社 社員ブログ
Blog
  • ホーム
  • ブログ
  • 擬似クラスの:has()に期待

擬似クラスの:has()に期待

ナレッジ・ノウハウ
擬似クラスの:has()に期待

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


emi

Webデザイナー

    10年以上コーディングがメインだったデザイナーです。検証ツールでソースを見るのが大好きです。

    関連記事

    Copyright © 2022, chot inc.