【CSS Modules】:checked疑似クラスの使い方
:checked疑似クラスの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
:checkedクラスは、HTMLのユーザーインターフェース要素が「選択済み」または「チェック済み」の状態にあることを表すクラスです。これはCSSにおける擬似クラスの一種であり、特定の状態にある要素にスタイルを適用するためのセレクタとして機能します。
具体的には、<input type="checkbox">や<input type="radio">といったフォームコントロール、または<select>要素内の<option>要素がユーザーによって選択されたり、プログラム的に「チェック済み」または「選択済み」の状態になった場合にマッチします。
開発者は:checked擬似クラスを使用することで、JavaScriptを介することなく、チェックボックスがオンになった際やラジオボタンが選択された際に、その要素や関連する他の要素の見た目をCSSだけで変更できます。例えば、チェック済みのチェックボックスの隣にあるラベルの文字色を変えたり、選択されたラジオボタンの背景色を変更したりするのに役立ちます。
これにより、フォームの状態変化に応じた視覚的なフィードバックをシンプルかつ効率的に提供し、ユーザー体験を向上させることが可能です。ユーザーの操作によって状態が動的に変化するUI要素のスタイリングにおいて、:checked擬似クラスは非常に重要な役割を果たします。
公式リファレンス: :checked
構文(syntax)
1input:checked { 2 /* チェックされた入力要素にスタイルを適用 */ 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません