CSS
-
자식 요소가 focus 되었을 때 부모도 효과를 받고 싶다면?물망초. 2021. 6. 17. 16:52
간혹 가다 그런 경우가 있다. 자식요소가 focus 되었지만, 효과는 부모요소가 받아야 하는 경우가 있다. 예를 들어 form 내부에서 input 자식 요소가 있어서, 해당 요소가 :focus 되었을 때 부모요소의 border 라던가 background-color가 변경되는 경우가 있다. 이런 경우 지식이 부족했던 나는 isActive 라는 불필요한 변수를 만들어서 제어하려 했다. 꼭 error를 클래스로 작성해서 주는것처럼... 하지만 정말 좋은 방법이 있었는데!!! 바로 :focus-within 이라는 녀석이다. 아래 mdn을 들어가면 간단한 설명과 예시가 있다. 아래 양식의 값을 채워주세요. 이름: 성: form { border: 1px solid; color: gray; padding: 4px; ..