CSS 에서 일반 형제 선택자 (General Sibling Selector ~)와 인접 형제 선택자 (Adjacent Sibling Selector +)를 사용하여, 특정 엘리먼트의 뒤 또는 바로 뒤에 있는 엘리먼트들을 선택할 수 있습니다. 그러나 앞에 위치한 엘리먼트를 선택할 수 있는 방법은 없었죠.
CSS Combinators 참고
그런데 CSS Selectors Level 4 에서 추가된 :has() 수도-클래스(pseudo-class)를 응용하면 앞의 엘리먼트들 또는 직전의 엘리먼트를 선택할 수 있습니다.
<div class="parent"> <span class="child"></span> <span class="child"></span> <span class="child"></span> <span class="child target"></span> <span class="child"></span> <span class="child"></span> <span class="child"></span> </div> |
.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?