:has()
Baseline 2023 Newly available
MDN Web Docs : :has()
CanIUse : :has() CSS relational pseudo-class
CSSの擬似クラスの1つで、引数に渡したセレクタの子要素を持つ親要素にスタイルを設定できる。
特定の子要素を持つかどうかで親要素のスタイルを変えることができる夢のような疑似クラス
ブラウザの互換性は以下の通り
2023/12/19のリリースでついにFirefoxでも完全対応(Full support)されたため、晴れて全てのブラウザで使用できるようになった
https://gyazo.com/93271d886f11c723dcc1f18d530662f1
2022/9くらいから順次実装されつつあるらしい
https://gyazo.com/be2572f4056b18bbadf103ae156ad3df
あとはFirefoxかMijinko_SD.icon
https://gyazo.com/745027fc4729def86a609ec662db381d
2022/11/21に確認したら、Operaも対応済みになっていたMijinko_SD.icon
知らなかった!!nomadoor.icon
遊ぶぞおおお
https://gyazo.com/93b70fd0a1a40b55d1b46af8783d06ca
引用::has() - CSS: カスケーディングスタイルシート | MDN
※上記は2022/02/05時点での互換性
関連
机上の空論
端的に全てを表していて草takker.iconnishio.icon
そしてこの机上の空論を実装作業中のSafariは何者……?
今見たらフルサポートになってて草Mijinko_SD.icon
/emoji/exclamation.icon/emoji/question.icontakker.icon
iOS・macOSと同時に大型アップデートがSafariにも到来、新たな「高さ」の基準やカスケードレイヤーが追加される - GIGAZINE
実装できるもんなんだなあ……
このCSSの使い方を解説しているサイトは多数ある
新しい擬似クラス :is() / :has() / :where() の仕様を調べてみた - Qiita
CSSの擬似クラスhasの使い方を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン
なぜ実装されていないのだろう..?blu3mo.iconMijinko_SD.icon
たぶんDOMの検索に時間がかかるからだと思うtakker.icon
子孫要素全てを走査しなくてはならない
子要素だけだったらそこまででもないんだろうけど
これが実装されればScrapboxで特定のハッシュタグを持つページに対してスタイルを適用できるmtane0412.icon
body:has(a[type="hashTag"][href="/project/pageName"])
子孫要素じゃないからもうちょい複雑だな