CSS pseudo-class :has() 적용

[zealotzealot]

기존 css는 항상 parent에서 child 방향으로, 앞에서 뒤 방향으로만 선택이 가능했습니다.
예를 들어 a를 parent로 갖는 b (a > b)는 선택이 가능하지만 b를 child로 갖는 a는 선택이 불가능하고, c 바로 뒤의 d (c + d)는 선택이 가능하지만 d 바로 앞의 c는 선택이 불가능합니다.
최근 추가된 :has() pseudo-class(또는 selector)를 사용하면 이것이 가능해집니다. (a:has(> b), c:has(+ d))
이를 활용하면 stylesheet를 훨씬 더 깔끔하게 짤 수 있습니다.

다만 아직 지원하는 브라우저가 없으므로, 지원율이 충분히 올라가면 기존 코드 중 :has를 사용해 다시 짤 수 있는 부분을 변경하면 좋을 것 같습니다.

참고
https://developer.mozilla.org/en-US/docs/Web/CSS/:has
https://caniuse.com/css-has