子要素にfocusが当てられたときに親要素のスタイルを変更する

はじめに

子要素のイベントに対して親要素のスタイルを変える方法がよくわからなかったので調べました。
SCSSを使ってます。

完成イメージ

See the Pen Untitled by riiiiion (@riiiiion) on CodePen.

解説

inputContainerの中にinputとボタンが配置されているので
inputContainer = 親要素
input,button = 子要素
となっています。
今回は子要素にfocusが当たったときに親要素のborderの色を変更します。

それを実現するために :focus-withinという擬似クラスを使用します。

:focus-within

.inputContainer {
  width:210px;
  border:3px solid black;
  display: flex;
  justify-content :space-around;

  &:focus-within {
  border:3px solid red;
}
}

このようにすると子要素にfocusが当たったときのスタイルを記述することができます。

まとめ

:focus-within　　便利ですね〜