学習用に最新のモダンCSSをまとめてみます。
今回は新セレクタ:has() / :is() / :where() をまとめたいと思いますがまず:has()から。
疑似クラス :has() まとめ
:has()セレクタ
:has()セレクタは、子要素に特定の要素が存在するかどうかで親要素にスタイルを適用できます。
これにより、特定要素を内包する要素をグループ分けするなど、細かいデザインがシンプルなCSSだけで実現可能です。
親要素のcard内に画像がある場合のみレイアウトを横並びに変更
See the Pen Untitled by 山﨑恵 (@moco2-design) on CodePen.
親子関係だけではなく 「直後にp要素があるようなh1要素に対して」といった隣の要素にスタイルを適用する事も可能です。
See the Pen Untitled by 山﨑恵 (@moco2-design) on CodePen.
このようにJavascriptなしでスタイルの条件分岐指定ができるようになり、非常にシンプルで早くコーディングができるようになったと言えます。