자식 요소가 focus 되었을 때 부모도 효과를 받고 싶다면?

간혹 가다 그런 경우가 있다.
자식요소가 focus 되었지만, 효과는 부모요소가 받아야 하는 경우가 있다.

예를 들어 form 내부에서 input 자식 요소가 있어서, 해당 요소가 :focus 되었을 때
부모요소의 border 라던가 background-color가 변경되는 경우가 있다.

이런 경우 지식이 부족했던 나는 isActive 라는 불필요한 변수를 만들어서 제어하려 했다.
꼭 error를 클래스로 작성해서 주는것처럼...

하지만 정말 좋은 방법이 있었는데!!!

바로 :focus-within 이라는 녀석이다.
아래 mdn을 들어가면 간단한 설명과 예시가 있다.

<p>아래 양식의 값을 채워주세요.</p>

<form>
  <label for="given_name">이름:</label>
  <input id="given_name" type="text">
  <br>
  <label for="family_name">성:</label>
  <input id="family_name" type="text">
</form>

form {
  border: 1px solid;
  color: gray;
  padding: 4px;
}

form:focus-within {
  background: #ff8;
  color: black;
}

input {
  margin: 4px;
}

이렇게 제어를 하면 자식요소인 input에 focus가 적용되면 form의 focus-within을 만나서
background와 padding이 적용된다.

왜 이제 알았을까... 리팩토링 해야지...

ref.
mdn-:focus-within