CSS 가상 클래스 - :has, :not

:has

• 특정 요소를 가진 태그를 선택한다.

:not

• 특정 요소가 없는 태그를 선택한다.

설명만 봐서는 어디에 써야할지 난해한 가상 클래스지만, 실제 활용된 사례를 보면 무긍무진한 가능성을 확인할 수 있다. 지원브라우저가 사파리와 크롬밖에 없다는 단점이 있지만, 사용하기에 따라서는 자바스크립트 없이 CSS만으로 재밌는 것들을 만들 수 있어 간단히 다뤄보려고 한다.

 

활용 1 : 디자인이 비슷하나, 특정 요소가 없거나/더해질 때

See the Pen CSS :has, :not (1) by beren-105 (@beren-105) on CodePen.

 

두개의 카드 디자인이 있다. 하나는 이미지가 있고, 하나는 이미지가 없는 대신 상단에 border의 색상이 변경됐다.

본래라면 각각 클래스를 다르게 설정하며 따로 만들어야하지만, :has와 :not을 이용하면 클래스를 추가로 생성하지 않고 만들 수 있다.

 

/* 아티클에 이미지가 있을 때 */
article:has(img) {
    display: flex;
    align-items: center;
    border-top: 0.5rem solid #F16767;
}

/* 아티클에 이미지가 없을 때 */
article:not(:has(img)) {
    border-top: 0.5rem solid #B4E4FF;
}

전체 코드는 위에 있는 코드펜에서 확인할 수 있다.

 

 

활용2 : to do list 완료 표시

리스트의 모든 항목이 체크될 시, article의 배경색이 바뀐다. 이 기능을 자바스크립트 없이 :has와 :not만을 이용해 구현할 수 있다.

See the Pen CSS :has, :not (2) by beren-105 (@beren-105) on CodePen.

/* 인풋이 체크되어 있지 않으면 배경색이 흰색으로 보인다. */
article:has(input:not(:checked)) {
    background-color: white;
}

 

 

활용3 : 특정 요소가 있을 때 강조하기

See the Pen CSS :has, :not (3) by beren-105 (@beren-105) on CodePen.

위 예제에서는 여러개의 상품 중 추천 상품을 강조하고 있다.

article의 자식으로 recommend라는 클래스가 있을 시 그림자와 상단 border 색상을 바꾸고, padding을 이용해 크기를 크게 키웠다.

 

article:has(.recommend) {
    position: relative;
    box-shadow: 3px 3px 10px rgba(0 0 0 / 0.2);
    border-top: 0.5rem solid #EB455F;
    padding: 2.5rem 1.25rem;
}

 

 

활용4 : 캘린더에서 A날짜~B날짜까지 선택하기

다른 예제들과 달리 자바스크립트를 함께 사용한 예제다.

5일을 클릭 후 10일을 클릭하면, 그 사이에 있는 6~9일이 활성화된다. 다시 다른 일자를 클릭하면 초기화된다.

아래 캘린더를 만드는 과정은 여기에서 자세히 확인할 수 있다.

See the Pen Calender by beren-105 (@beren-105) on CodePen.

 

CSS부분만 간단히 살펴보자면, from이란 클래스에서 to 클래스까지 사이에 있는 모든 태그들을 ~로 선택하고 있다. 사이에 있는 태그들은 연한 하늘색, 클릭한 from과 to는 진한 하늘색으로 만들었다.

.tableDay p.from, .tableDay p.to {background-color: var(--color-sky);}

.from ~ :has(~ .to), .to ~ :has(~ .from) {background-color: var(--color-tbody-hover);}

 

 

이상으로 :has와 :not을 사용한 예제들이었다. 처음에 말했다시피 최신판이 아닌 이상 브라우저에서 지원하지 않는다는 단점이 있으나, CSS로 다양한 시도를 할 수 있는 가능성을 열어주기 때문에 한번쯤 따라하면 좋을 것 같다.