:has()
雑にしか見てないけどmrsekut.icon
条件を指定できる
例
内部にCを含むPに対して適用
code:css
body:has(video, audio) {
/* body が video または audio を含むとき、body に適用 */
}
これがhasという名前からして最もわかりやすい
親要素:( > 子要素)という風にカッコ内に>(子セレクタ (>))が必要と書かれているサイトもある 必須なのかどうかよくわからん
兄弟要素に対して適用
code:css
/* 直後に p 要素があるような h1 要素に対して適用 */
h1:has(+ p) {
margin-bottom: 0;
}
具体例いくつか
cssのhasの使いみちを聞かれたが、一番わかりやすいのはdialogタグが開いているときに後ろの画面をスクロールできないようにする書き方だと思う。今までjsでやってたが今はcssだけでできる ref https://gyazo.com/c866014ad92b826504dd908730c51275