2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

ちっちゃくアウトプットAdvent Calendar 2023

Day 19

2023年12月19日 ついに:has()が主要ブラウザで使えるようになった!?

Posted at

これはなに?

:has() というCSSの擬似クラスが、2023年12月19日から、FirefoxもSupportされるようになりました。
Firefox 121 for developers - Mozilla | MDN

詳しい挙動や使い方は、他の素晴らしい記事にお任せし、この記事では :has() の細かい挙動などではなく、ついに主要ブラウザで使えるようになった喜びをただ噛み締めたいと思います。

Chrome、Safari、Firefoxを最新版にして、デモをご覧ください :pray:

:has() とは

:has() - CSS: カスケーディングスタイルシート | MDN いわく

:has() は CSS の疑似クラス関数で、引数として渡される相対セレクターのいずれかが、その要素から辿ってアンカーとして少なくとも一つの要素とマッチする場合に、その要素を表します。この疑似クラスは、相対セレクターリストを引数として取ることで、参照している要素に関して親要素や前の兄弟要素を選択する方法を提供します。

誤解を恐れず簡単に言いますと、今までCSSは子要素にしか指定ができませんでしたが、親要素も指定できるようになります。

デモ

See the Pen has by gilly135 (@gilly135) on CodePen.

サポートブラウザ

:has() - CSS: カスケーディングスタイルシート | MDNを見ると、Firefoxだけ pre-release versionですが、2023年12月19日から主要なブラウザはサポートが来ました!

これからのマークアップがどのように変化していくのか楽しみですね! :tada:

参考

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?