:focus 정리

:focus

마우스 또는 키보드로 포커스가 된 상태

:focus-visible

마우스가 아닌 키보드로 포커스가 된 상태

마우스로 포커스 된 상태는 아래와 같이 사용할 수 있다.

:not(:focus-visible)

example

/* 기본 포커스 상태 */
*:focus {
  outline: none;
  box-shadow: 0 0 0 0.3rem ${getColor('focusVisible')};
}

/* 마우스로 포커스 한 상태 */
*:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* 키보드로 포커스 한 상태 */
*:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.3rem ${getColor('focusVisible')};
}

주의 !

:focus 상태를 설정하지 않으면 아래의 상태는 적용되지 않는다. 즉, 아래의 두 상태만 따로 설정할 수 없다.

:not(:focus-visible)
:focus-visible

:focus-within

본인 또는 자식이 포커스를 받으면 :focus-within이 설정된 요소에 스타일이 적용된다.

• <input>, <label>에 포커스가 되었을 때 <form>에 강조를 주고 싶을 때 사용할 수 있다.

• ::before, ::after와 같은 가상 요소에 focus 상태 시 스타일을 주고 싶을 때 사용할 수 있다.

example

아래와 같은 경우 input에 포커스가 되었을 때

<form>
  <label for="name">이름</label>
  <input id="name" type="text">
</form>

form:focus-within {
  background: #ff8;
  color: black;
}

자식 요소가 :focus-visible인 경우에만 :focus-within 스타일을 적용하는 방법

.input-group:has(:focus-visible):focus-within {
  outline: 4px solid hotpink;
}

reference

• :focus-within → 공식 문서

• :focus vs :focus-within → 블로그

• :focus-visible-within, the missing pseudo-class