【CSS Modules】:focus-within疑似クラスの使い方

:focus-withinクラスは、要素自身がフォーカスを持っているか、その子孫要素のいずれかがフォーカスを持っている場合に、その要素を選択するためのCSS擬似クラスです。このクラスは、ユーザーがWebページのフォーム要素（入力欄やボタンなど）にカーソルを合わせたり、キーボードのタブキーで移動してフォーカスが当たった際に、そのフォーカスされた要素だけでなく、それを囲む親要素にもスタイルを適用したい場合に非常に有効です。

具体的な使用例としては、複数のフォームフィールドをグループ化したdiv要素やfieldset要素に対して:focus-withinを適用することが挙げられます。これにより、ユーザーがグループ内のいずれかの入力欄にフォーカスすると、そのグループ全体に視覚的な強調（例えば、枠線の色を変える、背景色を付けるなど）を与えることができます。

この機能は、ユーザーが現在どの入力セクションに注目しているかを視覚的に明確にするため、ユーザビリティとアクセシビリティの向上に大きく貢献します。JavaScriptを使わずに純粋なCSSだけでこのような動的なUIの振る舞いを実現できるため、開発の手間を削減し、コードの保守性も高めることができます。Webアプリケーションのユーザーインターフェースをより直感的で使いやすくするために、:focus-withinクラスは重要なツールの一つです。

Copy
1selector:focus-within {
2  /* スタイルを記述 */
3}

引数なし

引数はありません

戻り値なし

戻り値はありません