CSS 이전의 엘리먼트 선택하기

CSS 에서 일반 형제 선택자 (General Sibling Selector ~)와 인접 형제 선택자 (Adjacent Sibling Selector +)를 사용하여, 특정 엘리먼트의 뒤 또는 바로 뒤에 있는 엘리먼트들을 선택할 수 있습니다. 그러나 앞에 위치한 엘리먼트를 선택할 수 있는 방법은 없었죠.
CSS Combinators 참고

그런데 CSS Selectors Level 4 에서 추가된 :has() 수도-클래스(pseudo-class)를 응용하면 앞의 엘리먼트들 또는 직전의 엘리먼트를 선택할 수 있습니다.

.parent{display:flex;flex-direction:row;gap:10px;justify-content:center;padding:20px;}
.child{padding:20px;border:1px solid orange;font-size:32px;}
.child:before{content:"child";}

.child.target{background-color:orange;}
.child.target:before{content:"target";}

.target ~ .child{background-color:lightgrey;}
.target ~ .child:before{content:"after";}

.target + .child{background-color:grey;}
.target + .child:before{text-transform:uppercase;color:white;}

.child:has(~ .target){background-color:greenyellow;}
.child:has(~ .target):before{content:"before";}

.child:has(+ .target){background:green;}
.child:has(+ .target):before{text-transform:uppercase;color:white;}

단, :has() 셀렉터를 일부 브라우저에서 아직 지원하지 않기 때문에, 사용에 주의가 필요합니다. 파이어폭스 Nightly에서 지원을 시작했기 때문에 조만간 파이어폭스도 지원할 것으로 보이네요.
Can I use :has?