가상 클래스 focus-within

가상 클래스 focus-within은 포커스를 받은 요소에 스타일을 적용합니다. 요소 자체에 직접 스타일을 지정하는 가상 클래스 focus와 달리, focus-within은 부모 요소에 스타일을 적용합니다.

문법

css선택자:focus-within {

}

예제

자식 요소인 입력창이 포커스를 받을 때, 부모 요소의 배경색을 파란색으로 설정해 봅시다:

html<div>
  이름을 입력하세요: <input name="user">
</div>

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

Результат:

함께 보기