This page was translated from English by the community.Learn more and join the MDN Web Docs community.
:focus-within
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020년 1월.
CSS:focus-within의사 클래스는 포커스를 받았거나, 포커스를 받은 요소를 포함하는 요소를 나타냅니다. 즉 스스로:focus 의사 클래스와 일치하거나, 그 자손 중 하나가:focus와 일치하는 요소를 나타냅니다. (섀도 트리 내부도 포함)
css
/* Selects a <div> when one of its descendants is focused */div:focus-within { background: cyan;}흔히 쓸 수 있는 예시로서,<form>의<input> 필드 중 하나가 포커스된 경우 전체<form>을 강조해야 할 때 유용하게 사용할 수 있습니다.
구문
Error: could not find syntax for this item예제
다음 예제에서는 두 텍스트 입력 칸 중 하나라도 포커스를 받은 경우 양식을 강조합니다.
HTML
html
<p>아래 양식의 값을 채워주세요.</p><form> <label for="given_name">이름:</label> <input type="text" /> <br /> <label for="family_name">성:</label> <input type="text" /></form>CSS
css
form { border: 1px solid; color: gray; padding: 4px;}form:focus-within { background: #ff8; color: black;}input { margin: 4px;}결과
명세
| Specification |
|---|
| Selectors Level 4 # the-focus-within-pseudo |