:focus-within 가상 클래스 사용법

:focus-within 가상 클래스는
요소 또는 그 요소의 자손 중 하나가 포커스되었을 때 해당 요소를 선택합니다.
이 선택자는 부모 요소에 스타일을 지정할 수 있다는 점이 :focus 가상 클래스와 다릅니다.

HTML 
<form>
    <fieldset>
        <legend>이름을 입력하세요.</legend>
        <label for="user-name">Usrname</label>
        <input type="text" id="user-name" placeholder="이름 입력...">
    </fieldset>
</form>
CSS 
fieldset {
    padding: 1em;
}
fieldset:focus-within { /* 자기 또는 자손 요소가 포커스되었을 때 선택됨 */
    background-color: yellow;
}
실제 적용된 모습 - 시도해 보세요! 이름을 입력하기 위해 <input> 태그에 포커스 하면 조상 요소인 <fieldset>에 설정한 fieldset:focus-within 스타일인 노란 배경색이 스타일 됩니다.

:focus-within는 해당 요소의 자손 요소 중 하나가 포커스를 받았을 때에도 적용되기 때문에 주로 웹 접근성을 향상시키기 위해 사용되며, 키보드로 사이트를 탐색하거나 접근성을 고려한 디자인을 구현할 때 유용합니다.

:focus-within 가상 클래스의 형식은 다음과 같습니다.

구문

CSS 
:focus-within {
    /* ... */
}

브라우저 호환성

:focus-within 가상 클래스 브라우저 호환성
선택자
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
:focus-within 60 79 52 47

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

:focus-within 가상 클래스 명세서 사양
명세서 사양
:focus-within Selectors Level 4
#the-focus-within-pseudo

참고문헌

같이 보기