CSS의 스타일을 적용할때 어떤 요소에 적용할 것인지 결정하는 방법으로 선택자를 사용합니다. 아래는 의사선택자 중 하나인 :not() 선택자의 기능과 사용방법에 대하여 알아보겠습니다.


# :not 선택자 알아보기
css의  :not 선택자는 이미 지정된 css 스타일에서 특정한 요소를 제외시킬 경우 사용합니다. 일반적으로 선택자는 선택을 하지 않기위해 사용하지만 이 경우는 선택을 하지 않기 위해서 사용합니다. 이 선택자를 알아두면 실제 활용할 부분이 매우 많기 때문에 굉장히 유용합니다. 아래는 가장 기본적인 문법 및 사용방법입니다.

선택할 요소:not(제외시킬 요소) { ... }

보시는 것과 같이 소괄호안에 원하는 태그를 넣어주면 됩니다. 아래는 간단한 사용 예제입니다.


# :not()선택자 예제 소스 보기 예제를 사용하여 자세히 알아봅니다. 아래 예제는 disabled 클래스명을 가지고 있는 경우 폰트를 회색으로 변경하는 코드 예제입니다.
@ not.html
<div>
   <p>working</p>
   <p class="disabled">not working</p>
</div>

@ not.css
div p:not(.disabled) {
   color: blue;
}

위 예제를 수행하면 disabled 속성을 가지지 않는 모든 태그는 텍스트에 블루 색상이 적용되게 합니다. 매우 간단하죠? 그렇다면 해당 속성이 자주 사용되는 경우는 언제가 있을까요?

예를들어 많은 버튼들이 있는데 그 중 한, 두 개만 비활성화된 경우... 즉, 클릭이 불가능한 경우에 시각적으로 보여주기 위해서 파란색이 아닌 다른 색상을 적용할 수 있을 것입니다. 이 경우 제외 선택자 :not()이 매우 유용하게 쓰일 수 있겠죠. 한가지 더!! 주의할 점으로 소괄호 () 안에는 따옴표 표기를 하지 않습니다.


# :not()을 사용해 클래스가 아닌 속성만 제외하는 경우 위 예제는 클래스 속성에 적용한 예제이나 클래스 속성 말고도 다른 속성(href 등등)에 사용도 가능합니다. 예를 들어 href 속성이 없는 경우 폰트 색을 회색으로 변경한다면 아래와 같을 것입니다.
<div>
   <a href="test.html">Move</a>
</div>

아래는 css 파일 코드입니다.
div a:not(href) {
   color: gray;
}

여기까지 CSS의 :not 선택자를 사용하는 몇 가지 예제를 알아보았습니다. 선택자를 사용하여 반대되는 케이스에 스타일을 적용할 때 이 방법을 사용하면 매우 편리하게 적용할 수 있습니다.