モダンなCSSに触れてみよう

こんにちわ、社員Tです。

だいぶ更新が止まってしまいました。。

さて今回は、年々進化しているCSSの機能について書いていこうと思います。

コンテナクエリ、スタイルクエリ、:nth-child()の「of S」構文と盛りだくさんな中で、注目したいのが

：has()セレクタを紹介したいと思います。

:has()とは

CSSの擬似クラスは、特定の状態にある要素を選択するために使用します。
:has()擬似クラスには二つの状態の要素を選択する機能があります。

親要素の選択：特定の子要素を持つ親要素を選択することができます。
兄要素の選択：直後に特定の弟要素がある兄要素を選択することができます。

これにより今まではできなかった子要素から親要素、弟要素から兄要素に影響を与えることが、CSSだけでできる様になりました。

使い方

特定の子要素を持つ親要素の選択方法

下記のコードは<div>タグが子要素に<span>タグを持っているかどうかを判断しています。

See the Pen
Untitled by 鶴田佳佑 (@hjvzvsbh-the-builder)
on CodePen.

直後に特定の弟要素を持つ兄要素の選択方法

下記のコードは<div>タグの直後に<span>タグがあるかどうかを判断しています。

See the Pen
Untitled by 鶴田佳佑 (@hjvzvsbh-the-builder)
on CodePen.

以上が:has()の使い方になります。

使用例

カード型レイアウト

See the Pen
Untitled by 鶴田佳佑 (@hjvzvsbh-the-builder)
on CodePen.

:has()を活用したカード型コンポーネントのコード例です。
従来は、画像の有無に応じて異なるクラスをそれぞれのカードに適用し、コーディングする必要がありました。
しかし、:has()を使用することで、カード内に画像が含まれているかどうかに基づいてスタイルが自動的に適用されるため、同一のクラス名で実装が可能になります。

ホバーアニメーション

See the Pen
Untitled by 鶴田佳佑 (@hjvzvsbh-the-builder)
on CodePen.

タグのホバー時に背景にアニメーションを追加するコード例です。
以前は、子要素のホバー時に親要素のスタイルを変更するためにはJavaScriptの使用が必須でした。
しかし、:has()の導入により、子要素から親要素へのスタイル影響が可能となり、CSSのみでコーディングができる様になりました。

同意ボタン

See the Pen
Untitled by 鶴田佳佑 (@hjvzvsbh-the-builder)
on CodePen.

同意チェックボックスがチェックされた際に送信ボタンのスタイルを変更するコード例です。
この機能も以前は実装するためにJavaScriptの利用が必要でしたが、:has()の活用により、CSSだけで実装が可能になりました。
この他にも、:has()応用次第で、さまざまな要素の操作が容易になりました。

以上が :has()セレクタの使用例です。
今回紹介した方法以外にも、JavaScriptでクラスを付与することで:has()が機能する実装など、応用次第で様々な実装が可能になりました。

年々便利になり、実務での効率化も捗りますね！

この記事を通じて、皆様のコーディングを便利にすると共に、has:()によるCSSの新たな可能性を感じていただけたら幸いです。