[HTML/CSS] focus-within — 자식 요소가 포커스 됐을 때 부모 스타일 지정

focus-within 살펴보기

---

:focus-within은 포커스를 받은 요소 혹은 포커스를 받은 요소(주로 input 태그)를 포함하는 부모 요소를 가리킨다. input 같은 하위 요소가 focus 됐을 때 부모 요소의 스타일을 변경하고 싶을 때 사용하면 유용하다.

 

아래 예제에서 input 태그를 자식으로 포함하는 .wrapper 클래스 이름의 부모 요소가 있다.

<div class="wrapper">
  <p>
    Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie.
  </p>
  <label for="color">Choose text color</label>
  <input type="color" id="color" value="#1863b4" />
</div>

 

input 태그를 선택해서 활성화되면(포커스를 받으면), 해당 input 태그를 포함하는 부모 요소인 .wrapper 클래스에 focus-within 의사클래스를 사용해서 그림자 효과를 주는 코드.

.wrapper:focus-within {
  box-shadow: 0px 0px 5px 5px #ccc;
}

 

input 태그의 id와 label 태그의 for 속성을 동일하게 입력해서 연결했기 때문에 label 태그를 클릭했을 때도 그림자 효과가 적용된다.

 

 

코드펜 예제 코드

---

See the Pen [CSS] :focus-within by ColorFilter (@colorfilter) on CodePen.

 

 

번외) focus를 받을 수 있는 요소

---

어떤 요소가 focus를 받을 수 있는지 정의한 공식적인 문서는 없지만(비공식적으로 정리한 사이트는 있음) 일반적으로 아래 엘리먼트들이 포커스를 받을 수 있다.

 

• HTMLInputElement
• HTMLSelectElement
• HTMLTextAreaElement
• HTMLAnchorElement
• HTMLButtonElement
• HTMLAreaElement

 

document.activeElement는 현재 활성화(active)되어 있는 DOM 요소를 반환하는 읽기 전용 속성이다. 이 속성을 이용해 아래 같은 간단한 함수를 만들어서 포커스를 받을 수 있는 엘리먼트인지 확인하는 방법도 있다.

function focus(el) {
  el.focus(); // 인자로 받은 엘리먼트 활성화(active)
  return el === document.activeElement; // true면 focus를 받을 수 있는 요소
}

 

div 태그에서도 focus를 받고 싶다면 tabindex를 0 혹은 -1로 설정하면 된다

<div tabindex="-1">텍스트</div>

 

아래는 tabindex="-1" tabindex="0" 차이점 (설명 출처). 참고로 tabIndex="1" 로 설정하면 탭(Tab) 우선 순위가 가장 높아져서 탭 키를 누르면 첫번째로 포커스된다.

 

• If given a value of -1, the element can't be tabbed to but focus can be given to the element programmatically (using element.focus()).
• If given a value of 0, the element can be focused via the keyboard and falls into the tabbing flow of the document. Values greater than 0 create a priority level with 1 being the most important.

 

레퍼런스

---

• :focus-within - CSS: Cascading Style Sheets | MDN
• :focus-within
• [CSS] 선택자 :focus-within 알아보기
• tabindex로 포커스 제어   

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요