:focus-within (하위 요소에 focus된 객체가 있을 시)

https://developer.mozilla.org/ko/docs/Web/CSS/:focus-within

:focus-within - CSS: Cascading Style Sheets | MDN

 

:focus-within는 부모요소에게 적용시에 하위 요소중에 focus 상태가 있을시에 부모요소에게 적용되는 css이다.

 

<div>
	<input type="text" id="inputText" />
</div>

<style>
    div {
      padding: 3rem;
    }
    div:focus-within {
      background: red;
    }
</style>

 

위와 같은 상황 일경우 상단 div요소에 :focus-within를 적용시에

하단의 input에 focus 된 경우 div에 background: red; 속성이 적용된다.