:has()疑似クラスの使い方メモ

今後のデザインで採用するかもしれない疑似クラスのメモ書き
cssで意図したスタイル、アニメーションを当てられないときはJavaScriptで実装する。もし、:has()疑似クラスを使えばJavaScriptを使用しなくても、指定したセレクタやDOMを取得し、任意のスタイルを当てることが出来るようになる。
使い方の一例をあげる

例

<div class="card">
    <div class="card-image">
        <img src="awameh.jpg" alt="">
    </div>
    <div class="card-content">
    </div>
</div>
 
<div class="card">
    <div class="card-content">
    </div>
</div>

例

.card:has(.card__image) {
    display: flex;
    align-items: center;
}

上のコードでは子要素に.card__imageがある.cardにCSSが適応されます。

現時点ではFirefoxはまだサポートされていない。
has():疑似クラスのサポート状況
なので、まだ採用はしない、JavaScriptや、CSSのの記述量を減らせるのは大きいので早くサポートしてほしい(´・ω・`)

参考：

CSSの:has()疑似クラスの便利な使い方を徹底解説