css ) where, not, has 가상 선택자를 알아보자

오랜만입니다. 최근 글을 쓸 시간이 없어서, 글을 잘 못썼습니다. 각설하고, 오늘은 최근 css에서 자주 사용되고 있는 가상 선택자인 where, has, not이라는 3가지의 선택자에 대해 알아보겠습니다.

 

where()

where()은 인자로 여러 개의 선택자를 쉼표(,)로 구분하여 넘길 수 있게 합니다.

예를 들자면.

:where(a1, a2, a3) {
	color : black;
}

위와 같은 where()을  풀어 해치면

a1,
a2,
a3
{
	color:black;
}

이런식으로 우리가 보았던 익숙한 css를 볼 수가 있죠.

겉으로 보기엔 힘들게 이런 걸 사용하나 쉽지만, 생각보다 이점이 많습니다.

 

See the Pen Untitled by 이규한 (@chmqedde) on CodePen.

 

 

 

 

반복문 처럼 사용 할 수 있어 코드의 효율을 높일 수 있고, depth가 깊은, 여러 컴포넌트에서 사용되는 태그의 스타일을 바꾸기 용이합니다.

다만 :before, :after 같은 가상 선택자는 바꿀 수 없기 때문에, 사용에 주의가 필요합니다.

 

 

not()

not()은 괄호 안에 매개변수 요소를 제외한 요소의 스타일을 지정하는 데 사용합니다. 

우리가 생각하는 부정문이라고 보면 되고, 사용법도 간단합니다.

See the Pen Untitled by 이규한 (@chmqedde) on CodePen.

 

 

 

그냥 사용하고자 하는 요소, 혹은 가상 선택자를 :not()의 파라메터로 쓰면 됩니다.

 

has()

has()는 부모 요소가 매개변수 내에 있는 요소를 선택할 수 있는 선택자입니다. 쉽게 예를 들자면 css의 If문이라고 이해하시면 될 것 같습니다. css를 써보신 분들은 아시겠지만, 따로 if문이 없어, 요소 내에 다른 요소를 찾으려면 scss를 이용하거나 복잡한 선택자를 사용해야 했는데, css level 4에서 has()가 추가됨으로써 더 쉽게 사용할 수 있게 됐습니다.

 

See the Pen Untitled by weaklion (@chmqedde) on CodePen.