最終回 :has()を実践で使いこなす応用ユースケース
今回は、画像の有無に応じたカードレイアウト、連続する見出しのマージン調整、サブメニューへのアイコン追加といった、より実践的な3つのユースケースを通して、:has()の応用的な活用方法を紹介します。
第2回 :has()でモーダルダイアログとホバーの状態を扱う
第2回では、モーダルダイアログ表示中のスクロールロックと、ホバー中のカード以外を暗くする演出という2つのユースケースを通して、:has()の表現力を紹介します。あわせて、使用時の注意点も解説します。
第1回 :has()で親セレクターを使いこなす
子要素の状態に応じて親要素のスタイルを変えたいという処理を書けるのが、CSSの:has()です。第1回では、:has()の基本的な書き方と、フォームのバリデーション状態に応じたスタイリングという身近なユースケースを通して、その便利さを紹介します。