Focus Within And Focus Visible
:focus-within
이 pseudo-class는 요소의 자식 요소 중 하나가 포커스를 가지고 있을 때 요소에 적용된다.
/* focus-within */
.parent:focus-within {
outline: 2px solid crimson;
border: 2px dashed crimson;
border-radius: 3px;
}<div class="parent">
<input type="text" />
</div>위와 같은 상황에서 input에 포커스가 가면, div는 배경색이 빨게집니다.
:focus-visible
이 pseudo-class는 요소가 키보드 포커스를 가지고 있을 때 요소에 적용된다.
/* focus-visible */
input:focus-visible {
outline: 2px solid red;
border: 2px dashed red;
border-radius: 3px;
}같은 html을 갖고 있을 경우에 input에 focus가 되면, 빨간색의 점선 테두리가 생깁니다.