[css]css 가상 클래스 선택자: :not()과 :has()

이번 포스트에서는 CSS 선택자 level 4에 소개된  :not()과 :has() 선택자를 사용해보자.

 

:not(x)

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

의미와 사용법

:not(x)는 x에 부합하지 않은 요소를 선택하기 위한 선택자이다.

p:not(.classy) { color: red; }
body :not(p) { color: green; }

<p>Some text.</p>
<p class="classy">Some other text.</p>
<span>One more text<span>

만약 위와 같이 CSS가 적용된 HTML이 있다면 결과는 아래와 같다.

 

브라우저 호환성

:not()은 현재 사용되는 대부분의 브라우저에서 무리 없이 사용 가능하다.

 

:has(x)

https://developer.mozilla.org/en-US/docs/Web/CSS/:has

의미와 사용법

:has는 내부에 x에 해당하는 내용을 가지고 있는 요소를 선택하는 가상 클래스 선택자이다. 기존에 자식을 선택하는 선택자는 있었지만 부모를 선택하는 선택자가 없었기 때문에 매우 반갑고 활용도도 꽤 많은 편이다. 간단한 사용 예를 보면서 감을 익혀 보자.

/*p 태그를 바로 아래 동생으로 갖는 h1*/
h1:has(+ p) {
  background-color: gray;
}

/*.class2를 자식으로 갖는 div*/
div:has(.class2) {
  color: red;
}

<h1>hello</h1>
<p>강조해줘</p>

<div>
  <div class="class1">
    <p>1</p>
  </div>
  <div class="class2">
    <p>2</p>
  </div>
  <div class="class3">
    <p>3</p>
  </div>
</div>

 

위의 css가 적용된 HTML의 표현 결과는 아래와 같다.

 

브라우저 호환성

has의 경우 2023.03.05일 현재 Firefox 계열에서는 지원하지 않는 경우가 존재한다. 필요하다면 caniuse.com에서 확인 후 사용이 필요하다.