:focus-within

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

CSS :focus-within 의사 클래스는 포커스를 받았거나, 포커스를 받은 요소를 포함하는 요소를 나타냅니다. 즉 스스로 :focus 의사 클래스와 일치하거나, 그 자손 중 하나가 :focus와 일치하는 요소를 나타냅니다. (섀도 트리 내부도 포함)

css
/* Selects a <div> when one of its descendants is focused */
div:focus-within {
  background: cyan;
}

흔히 쓸 수 있는 예시로서, <form><input> 필드 중 하나가 포커스된 경우 전체 <form>을 강조해야 할 때 유용하게 사용할 수 있습니다.

구문

Error: could not find syntax for this item

예제

다음 예제에서는 두 텍스트 입력 칸 중 하나라도 포커스를 받은 경우 양식을 강조합니다.

HTML

html
<p>아래 양식의 값을 채워주세요.</p>

<form>
  <label for="given_name">이름:</label>
  <input id="given_name" type="text" />
  <br />
  <label for="family_name">성:</label>
  <input id="family_name" type="text" />
</form>

CSS

css
form {
  border: 1px solid;
  color: gray;
  padding: 4px;
}

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

input {
  margin: 4px;
}

결과

명세

Specification
Selectors Level 4
# the-focus-within-pseudo

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:focus-within

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

같이 보기