번역이 완료되지 않았습니다. Please help translate this article from English

: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> 컨테이너를 강조하기 위한, 일반적인 예를 들기에 유용합니다.




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


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

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


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

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

input {
  margin: 4px;



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
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:focus-withinChrome Full support 60Edge Full support 79Firefox Full support 52IE No support NoOpera Full support 47Safari Full support 10.1WebView Android Full support 60Chrome Android Full support 60Firefox Android Full support 52Opera Android Full support 44Safari iOS Full support 10.3Samsung Internet Android Full support 8.0


Full support  
Full support
No support  
No support

See also