【CSS】新しい擬似クラス:has()の使い方

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>

<section>
	<h2>Title</h2>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</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/