가상 클래스 focus-within
가상 클래스 focus-within은 포커스를 받은 요소에 스타일을 적용합니다.
요소 자체에 직접 스타일을 지정하는 가상 클래스 focus와 달리, focus-within은
부모 요소에 스타일을 적용합니다.
문법
선택자:focus-within {
}
예제
자식 요소인 입력창이 포커스를 받을 때, 부모 요소의 배경색을 파란색으로 설정해 봅시다:
<div>
이름을 입력하세요: <input name="user">
</div>
div {
width: 300px;
height: 50px;
padding: 10px;
}
div:focus-within {
background-color: #C2DDFD;
}
:
함께 보기
-
불확정 상태인 토글에 스타일을 지정하는 가상 클래스
:indeterminate, -
기본값 요소에 스타일을 지정하는 가상 클래스
:default, -
전체 화면 모드의 요소에 스타일을 지정하는 가상 클래스
:fullscreen, -
힌트 텍스트가 표시될 때 요소에 스타일을 지정하는 가상 클래스
:placeholder-shown, -
입력창의 텍스트 커서 색상을 지정하는 속성
caret-color,
