【CSS Modules】:is疑似クラスの使い方
:is()疑似クラスの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
:is()関数は、CSSにおいて複数のセレクタを簡潔にグループ化し、対象要素がそれらのいずれかに一致するかどうかを判定する関数です。この擬似クラスを使用することで、スタイルを適用したい複数の要素を、より短い記述で効率的に指定できます。
具体的には、:is()の括弧内にカンマ区切りで複数のセレクタを指定すると、それらのセレクタのうち、どれか一つにでも要素が一致した場合にスタイルが適用されます。これは「OR」条件として機能し、CSSのコード量を削減し、可読性を向上させるのに役立ちます。例えば、:is(h1, h2, h3)のように記述することで、h1, h2, h3のいずれかの見出し要素に対して同じスタイルを適用できます。
また、:is()の重要な特徴として、その詳細度（specificity）の計算方法が挙げられます。:is()は、その引数として渡されたセレクタの中で最も詳細度が高いセレクタの詳細度を継承します。これにより、予期せぬ詳細度の低いセレクタによるスタイルの上書きを防ぎ、意図した通りのスタイル適用が可能になります。
この機能は、特に複数の異なる状態や親要素を持つ要素に対して共通のスタイルを適用したい場合に非常に便利です。例えば、ナビゲーションメニューのリンクがホバーされた時とアクティブな時の両方に同じスタイルを設定したい場合や、複数の特定のクラスを持つ要素に共通のスタイルを設定したい場合などに活用できます。:is()を使うことで、このような複雑なセレクタの組み合わせをシンプルに保ち、将来的なメンテナンスも容易になります。
公式リファレンス: :is()
構文(syntax)
1:is(セレクターリスト) { 2 /* プロパティと値 */ 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません