擬似クラスfocus-within

擬似クラス focus-within は、フォーカス内にある 要素にスタイルを設定します。 要素自体にスタイルを設定する擬似クラス focus とは異なり、 focus-within は親要素のスタイルを設定します。

構文

cssセレクター:focus-within {

}

例

子要素のinputがフォーカスされたときに、 親要素の背景色を水色に設定してみましょう:

html<div>
  あなたの名前を入力してください: <input name="user">
</div>

cssdiv {
  width: 300px;
  height: 50px;
  padding: 10px;
}
div:focus-within {
  background-color: #C2DDFD;
}

Результат:

関連項目