:focus-within은 포커스를 받은 요소 혹은 포커스를 받은 요소(주로 input 태그)를 포함하는 부모 요소를 가리킨다. input 같은 하위 요소가 focus 됐을 때 부모 요소의 스타일을 변경하고 싶을 때 사용하면 유용하다.
아래 예제에서 input 태그를 자식으로 포함하는 .wrapper 클래스 이름의 부모 요소가 있다.
<div class="wrapper">
<p>Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie.</p>
<label for="color">Choose text color</label>
<input type="color" id="color" value="#1863b4" />
</div>
input 태그를 선택해서 활성화되면(포커스를 받으면), 해당 input 태그를 포함하는 부모 요소인 .wrapper 클래스에 focus-within 의사클래스를 사용해서 그림자 효과를 주는 코드.
.wrapper:focus-within {
box-shadow: 0px 0px 5px 5px #ccc;
}
input 태그의 id와 label 태그의 for 속성을 동일하게 입력해서 연결했기 때문에 label 태그를 클릭했을 때도 그림자 효과가 적용된다.
https://codepen.io/colorfilter/pen/NWgGENB
Which HTML elements can receive focus?
참고글
어떤 요소가 focus를 받을 수 있는지 정의한 공식적인 문서는 없지만(비공식적으로 정리한 사이트는 있음) 일반적으로 아래 엘리먼트들이 포커스를 받을 수 있다.