현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

: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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support60 No152 No4710.1
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support6060 No1524710.3 No

1. This feature is not implemented. See the enhancement request.

See also

문서 태그 및 공헌자

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