Gitsunmin

TIL

TIL
(=Today I Learned)

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가 되면, 빨간색의 점선 테두리가 생깁니다.