:has()
CSSの擬似クラスの1つで、引数に渡したセレクタの子要素を持つ親要素にスタイルを設定できる。 特定の子要素を持つかどうかで親要素のスタイルを変えることができる夢のような疑似クラス
ブラウザの互換性は以下の通り
https://gyazo.com/93271d886f11c723dcc1f18d530662f1
2022/9くらいから順次実装されつつあるらしい
https://gyazo.com/be2572f4056b18bbadf103ae156ad3df
あとはFirefoxかMijinko_SD.icon
https://gyazo.com/745027fc4729def86a609ec662db381d
知らなかった!!nomadoor.icon
遊ぶぞおおお
https://gyazo.com/93b70fd0a1a40b55d1b46af8783d06ca
関連
端的に全てを表していて草takker.iconnishio.icon
そしてこの机上の空論を実装作業中のSafariは何者……?
今見たらフルサポートになってて草Mijinko_SD.icon
/emoji/exclamation.icon/emoji/question.icontakker.icon
実装できるもんなんだなあ……
このCSSの使い方を解説しているサイトは多数ある
なぜ実装されていないのだろう..?blu3mo.iconMijinko_SD.icon
たぶんDOMの検索に時間がかかるからだと思うtakker.icon
子孫要素全てを走査しなくてはならない
子要素だけだったらそこまででもないんだろうけど
body:has(a[type="hashTag"][href="/project/pageName"])
子孫要素じゃないからもうちょい複雑だな