CSS 자식 요소가 focus 될 때 부모 요소 효과 주기

보통 인풋의 경우에는

하나의 컨테이너가 인풋태그와 초기화 버튼 등을 담고 있고

조건에 맞지 않는 입력값이 들어왔을 때 부모 컨테이너의 border 색상에 변화를 줘야 하는 경우가 많습니다

 

이럴 때 간단하게 쓸 수 있는 방법은 :focust-within 사용하기!

MDN에 정말 간단하게 사용법이 나와있습니다

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within

 

:focus-within

CSS:focus-within 의사 클래스는 포커스를 받았거나, 포커스를 받은 요소를 포함하는 요소를 나타냅니다. 즉 스스로 :focus 의사 클래스와 일치하거나, 그 자손 중 하나가 :focus와 일치하는 요소를 나타냅니다. 

 

 

<form>
  <p>Which flavor would you like to order?</p>
  <label>Full Name: <input name="firstName" type="text" /></label>
  <label
    >Flavor:
    <select name="flavor">
      <option>Cherry</option>
      <option>Green Tea</option>
      <option>Moose Tracks</option>
      <option>Mint Chip</option>
    </select>
  </label>
</form>

 

label {
  display: block;
  margin-top: 1em;
}

label:focus-within {
  font-weight: bold;
}

 

label에 :focus-within 의사 클래스를 추가하면

label의 하위 요소인 select가 focus되었을 때 label에 효과를 줄 수 있습니다