CSS :not() 가상 클래스 선택자 사용 방법

`:not(selectorX)` 가상 클래스

:not(selectorX) 가상 클래스 선택자는
인수로 취하는 selectorX와 일치하지 않는 요소를 선택합니다.

:not()의 괄호() 안의 값을 '인수(Argument)'라고 합니다.

이 선택자는 특정 선택자를 제외한 나머지 요소에 스타일을 적용하고 싶을 때 사용합니다.

예제

다음은 .not-bg 클래스 선택자를 가진 요소를 제외한 모든 <li> 요소에 배경색을 적용한 예제입니다.

HTML

<ul>
    <li>나는 li 요소입니다.</li>
    <li class="not-bg">나는 .not-bg 클래스 선택자를 가진 li 요소입니다.</li>
    <li>나는 li 요소입니다.</li>
    <li>나는 li 요소입니다.</li>
    <li>나는 li 요소입니다.</li>
</ul>

:not(selectorX) 가상 클래스 선택자는 동일한 선택자로 스타일을 적용하고 싶은 요소들 중에서 일부 요소만 제외하고 싶을 때 효과적입니다.

구문

주의할 점

:not() 가상 클래스 선택자의 인수로 다른 :not() 중첩이 불가합니다.
예를 들어, :not(:not(div)) 와 같이 :not() 안에 또 다른 :not()을 중첩하여 사용할 수 없습니다.

대부분의 브라우저에서 :not() 안에 다른 :not() 중첩을 허용하는 것으로 보입니다. 하지만, 이것은 명세서에서 명확하게 허용되지 않는 구문입니다. 즉, 대부분의 브라우저에서 지원한다고 해서 올바른 사용법이라고 할 수 없습니다. 또한, 미래의 변경 가능성이 있습니다. 언제든지 브라우저에서 지원을 중단할 수 있습니다.

여러 개의 선택자를 제외해야 할 경우

상황에 따라 여러 개의 선택자를 제외해야 하는 경우가 있습니다. 이러한 경우에는 다음의 두 가지 방법을 고려할 수 있습니다.

방법 1

:not() 가상 클래스 선택자의 인수로 여러 개의 선택자를 제외할 수 있습니다. 다중 선택자(그룹 선택자)를 의미하는 콤마 기호(,)를 사용하는 것입니다.

다음은 .not-bg-1과 .not-bg-2 클래스 선택자를 가진 요소를 제외한 모든 <li> 요소에 배경색을 적용한 예제입니다.

HTML

<ul>
    <li>나는 li 요소입니다.</li>
    <li class="not-bg-1">나는 .not-bg-1 클래스 선택자를 가진 li 요소입니다.</li>
    <li class="not-bg-2">나는 .not-bg-2 클래스 선택자를 가진 li 요소입니다.</li>
    <li>나는 li 요소입니다.</li>
    <li>나는 li 요소입니다.</li>
</ul>

방법 2

:not() 가상 클래스 선택자를 여러 번 사용하는 것입니다.

방법 1 vs 방법 2

:not() 가상 클래스 선택자의 인수로 여러 개의 선택자를 제외하는 '방법 1'과 :not() 가상 클래스 선택자를 여러 번 사용하는 '방법 2'는 둘 다 여러 개의 선택자를 제외해야 할 경우 사용할 수 있습니다.

하지만, 이 두 방법에는 약간의 차이점이 있습니다.
CSS 선택자의 스타일 우선순위를 결정하는 구체성 값(혹은 명시도, Specificity)가 다릅니다.

CSS

li:not(.not-bg-1, .not-bg-2) { /* 구체성 값(명시도): 0, 0, 1, 1 */
    background-color: yellowgreen;
}

li:not(.not-bg-1):not(.not-bg-2) {{ /* 구체성 값(명시도): 0, 0, 2, 1 */
    background-color: yellowgreen;
}

:not() 가상 클래스 선택자를 여러 번 사용하는 '방법 2'가 인수로 여러 개의 선택자를 제외하는 '방법 1'보다 구체성 값(혹은 명시도)가 높습니다.

명시도를 제외하고 둘 다 동일한 요소를 선택한다는 점에서는 일치하기 때문에 구체성 값(혹은 명시도)을 고려해야 할 상황이 아니라면, 코드 가독성 및 유지보수 등을 고려해서 적절한 방법으로 사용할 수 있습니다.