이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.

:focus-within CSS pseudo-class 는 focus 를 받거나, focus 를 받은 element 를 포함하는 element 를 나타냅니다. 즉, :focus pseudo-class 에 의해 자체적으로 일치하거나 :focus 에 의해 일치되는 자손을 가지는 element 를 나타냅니다. (이것은 shadow trees 내부의 자손을 포함합니다.)

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

이 선택자는 사용자가 <input> 필드 중 하나에 focus 할 때, 전체 <form> 컨테이너를 강조하기 위한, 일반적인 예를 들기에 유용합니다.

Syntax

:focus-within

Example

이 예시에서, text input 에 focust 를 받을 때 form 에 특수한 색상 style 이 적용될 것입니다.

HTML

<p>Try typing into this form.</p>

<form>
  <label for="given_name">Given Name:</label>
  <input id="given_name" type="text">
  <br>
  <label for="family_name">Family Name:</label>
  <input id="family_name" type="text">
</form>

CSS

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

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

input {
  margin: 4px;
}

Result

Specifications

Specification Status Comment
Selectors Level 4
The definition of ':focus-within' in that specification.
Working Draft Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 60Edge No support No
Notes
No support No
Notes
Notes This feature is not implemented. See the enhancement request.
Firefox Full support 52IE No support NoOpera Full support 47Safari Full support 10.1WebView Android Full support 60Chrome Android Full support 60Edge Mobile No support No
Notes
No support No
Notes
Notes This feature is not implemented. See the enhancement request.
Firefox Android Full support 52Opera Android Full support 47Safari iOS Full support 10.3Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.

See also

문서 태그 및 공헌자

이 페이지의 공헌자: dragmove
최종 변경자: dragmove,