CSS :focus-within

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

기본 예제

<form>
    <fieldset>
        <legend>이름을 입력하세요.</legend>
        <label for="user-name">Usrname</label>
        <input type="text" id="user-name" placeholder="이름 입력...">
    </fieldset>
</form>

 

fieldset {
    padding: 1em;
}
fieldset:focus-within { /* 자기 또는 자손 요소가 포커스되었을 동안 선택됨 */
    background-color: yellow;
}

 

이름을 입력하세요.

Usrname

 

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

 

참고문헌

codingeverybody.jp

CSS :focus-within擬似クラスセレクタ - codingEverybody

 

codingeverybody.kr

CSS :focus-within 가상 클래스 선택자 - 코딩에브리바디

 

codingCourses

CSS :focus-within Pseudo-Class Selector - codingCourses