정의 및 사용법

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

'포커스(focus)'란
요소가 키보드 입력이나 상호작용을 받을 준비가 된 상태를 나타냅니다. 주로 사용자가 탭(Tab) 키나 클릭을 통해 요소에 접근했을 때 발생합니다.

기본 예제

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 가상 클래스는 상호작용이 가능하고 접근성이 뛰어난 웹 컴포넌트를 만드는 데 특히 유용합니다. 자식 요소가 포커스를 받을 때 부모 요소에 스타일을 적용할 수 있다는 점에서 사용자 경험 향상에 큰 도움이 됩니다. 아래는 실제로 많이 쓰이는 예제를 통해 이 선택자의 활용 방식을 보여줍니다.

포커스된 폼 영역 강조하기

HTML 
<form>
    <fieldset>
        <legend>연락처 정보</legend>
        <label for="email">이메일</label>
        <input type="email" id="email" placeholder="이메일을 입력하세요">
    </fieldset>
</form>
CSS 
fieldset {
    padding: 1em;
    border: 2px solid gray;
    transition: border-color 0.3s ease;
}
fieldset:focus-within {
    border-color: blue;
    background-color: #e6f0ff;
}
실제 적용된 모습

사용자가 <fieldset> 내부의 입력 필드에 포커스를 주면, 부모 요소인 <fieldset>에 테두리 색상과 배경색이 적용되어 시각적으로 강조됩니다. 이는 관련된 입력 요소들을 하나의 영역으로 명확히 구분해 주며, 폼의 사용성과 접근성을 높이는 데 도움이 됩니다. 또한 전환 효과로 인해 스타일 변화가 부드럽게 나타나 사용자 경험이 더욱 향상됩니다.

포커스된 카드 강조하기

HTML 
<div class="card" tabindex="0">
    <h3>제품 제목</h3>
    <p>이 제품에 대한 간단한 설명입니다.</p>
    <button>자세히 보기</button>
</div>
<div class="card" tabindex="0">
    <h3>또 다른 제품</h3>
    <p>다른 제품에 대한 간단한 설명입니다.</p>
    <button>자세히 보기</button>
</div>
CSS 
.card {
    border: 1px solid #ccc;
    padding: 1em;
    margin: 1em 0;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    outline: none;
}
.card:focus-within {
    border-color: #007acc;
    box-shadow: 0 0 10px #007acc;
}
실제 적용된 모습

각 <div class="card"> 요소에 tabindex="0" 속성을 주면 키보드 포커스를 받을 수 있습니다. 카드 내부의 버튼처럼 포커스 가능한 요소에 접근하면, :focus-within 선택자가 적용되어 카드의 테두리와 그림자가 바뀌며 카드가 강조됩니다. 이러한 시각적 피드백은 현재 포커스된 카드가 어떤 것인지 쉽게 구분할 수 있게 해주며, 특히 키보드 기반 탐색을 사용하는 사용자에게 유용한 접근성을 제공합니다.

브라우저 호환성

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

명세서

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

참고문헌

같이 보기