CSSの届く範囲を広げる :has()

全1回

CSSのセレクターは、長らく上から下への一方通行でした。:has()の登場でその壁がなくなり、JavaScriptに頼っていた処理をCSSだけで書けるようになります。このシリーズでは、その:has()について解説します。

第1回 :has()で親セレクターを使いこなす

子要素の状態に応じて親要素のスタイルを変えたいという処理を書けるのが、CSSの:has()です。第1回では、:has()の基本的な書き方と、フォームのバリデーション状態に応じたスタイリングという身近なユースケースを通して、その便利さを紹介します。