【CSS Modules】:state疑似クラスの使い方
:state()疑似クラスの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
:state()関数は、Web Componentsなどで作成されるカスタム要素が持つ特定の「状態」に基づいて、スタイルを適用する要素を選択する擬似クラスの機能を提供する関数です。
この関数は、コンポーネントがカプセル化している内部の状態（例えば、メニューが「開いている」状態やデータが「読み込み中」の状態など）を、外部のCSSから直接内部構造に触れることなく安全に参照することを可能にします。これにより、開発者はカスタム要素の振る舞いに応じて、その要素またはその内部要素に異なるスタイルを適用できるようになります。
使い方は、セレクタの後に:state()を記述し、括弧内にターゲットとしたい状態の名前を指定します。例えば、<my-accordion>というカスタム要素が「open」という状態を持っている場合、my-accordion:state(open)のように記述することで、「開いている」状態のアコーディオンにのみ特定のスタイルを適用できます。
:state()関数は、カスタム要素のJavaScript側が明示的に公開する状態と連携して動作するため、コンポーネントの内部実装とスタイリングの責任を適切に分離し、保守性と再利用性の高いUIコンポーネント設計を支援します。特に、複雑なUIを持つアプリケーションにおいて、コンポーネントの状態管理と見た目の連携をシンプルかつ効果的に行うための重要なツールです。
公式リファレンス: :state()
構文(syntax)
1my-element:state(--is-active) { 2 background-color: lightblue; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません