CSSで条件分岐を実現！:has() セレクタ実践活用術

:has()を使うことで、これまでJavaScriptなどを使わなければ再現できなかった子要素の判定が可能になり、CSSのみで簡単な条件分岐のようなことが実現できるようになりました。
今回は:has()を使ったコーディング方法、実際に使えそうな活用例などを紹介していきたいと思います。

:has()の基本構文

親要素:has(子要素) {
    /* スタイル */
}

このように記述することによって、
親要素の中に 特定の子要素がある場合、その親要素にスタイルを適用することができます。

:has()の実践例

<div class="box">
    <p class="box__txtA">こちらは背景色なし</p>
</div>

<div class="box">
    <p class="box__txtB">こちらは背景色あり</p>
</div>

.box:has(.box__txtB){
    background-color: #888;
    color: #fff;
}

このように記述することで、
.box__txtBを子要素に持つ.boxのみ背景色と文字色を変更することができます。

実際にブラウザで上記コードを確認してみると、

ばっちりでした！

jqueryだと、.find(“.子要素”).length > 0みたいな感じで条件分岐して、
addClass()でクラスを付与してCSSで装飾するか、.css()で直接CSSを記述していたかと思います。
それが、子要素の有無の判定のみで良い場合はCSSだけで完結…すごいですよね。
jsに初挑戦するような方も、先にCSSで:has()の記述に慣れているとjsの理解も早まりそうです