[css] focus 시 형제 요소 함께 선택 (focus-within)

input을 선택했을 때 앞에 위치한 select에도 스타일을 넣기 위해 한참 연구한 결과 방법을 찾아냈습니다.

focus-within을 사용하면 뒤쪽에 위치한 요소에 focus가 갔을 때도 앞쪽에 있는 요소에 스타일을 줄 수 있습니다.

<div>
     <select></select>
     <input>
</div>

html이 이렇게 짜여 있을 때 input에 focus가 있을 때 앞쪽에 있는 요소에도 함께 스타일을 넣어야 할 때 사용할 수 있습니다.

div {
  &:focus-within > * {
  // style
  }
}

// or

div {
  &:has(input:focus):focus-within select {
    // style
  }
}