iOS 15.4がリリースされて、Safariで疑似クラス:has()のサポートが追加されていたので、使い方のメモです。
バージョン15.4以上のSafari以外の主要ブラウザでは、サポートされていないため（2022年3月31日現在）、まだまだ現場では使用できるのは先になりそうですが、便利そうなので覚えておくと良さそうです！
1. :has()とは
()内に指定した要素と一致する要素にスタイルが適用されます。
例えば…このような感じ。
/*<a>要素の直下に画像が含まれていたら<a>要素の背景が赤になる*/
a:has(>img) {
background: #f00;
｝
主要ブラウザで使用できるようになれば、cssのみでは不可能だったことが、実現でき、スタイルもスッキリされるはず！
2.書き方
▼サンプル
よくある場面としては、タイトルの下に、サブタイトルがあるパターンと、無いパータンがある場合、<h2>に2パターンのclassをつけるか、<h3>,<p>要素にmargin-topを指定する形になりそうですが、:hasを使用し、スタイルを簡潔にできそうです。
HTML
<section>
<h2>Title</h2>
<h3 class="sub-title">Sub-title</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<section>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</section>
</section>
CSS
section h2,
section h3.sub-title {
margin-bottom: 30px;
}
/*サブタイトルがあった場合のh2要素のマージン*/
section h2:has(+ h3.sub-title) {
margin-bottom: 15px;
}
3.対応ブラウザ
バージョン15.4以上のSafariのみサポートされています。（2022年3月31日現在）
▼擬似クラス:has()のサポート状況 | Can I use
https://caniuse.com/?search=has
4.参考サイト
こちらの記事を参考にさせていただきました。
▼:has() – CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/:has▼New WebKit Features in Safari 15.4 | WebKit
https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/▼The CSS :has Selector (and 4+ Examples) | CSS-Tricks – CSS-Tricks
https://css-tricks.com/the-css-has-selector/
