[CSS] :not() 선택자로 여러개의 클래스 제외하는 방법

CSS는 요소를 정확하게 지정하기 위한 다양한 선택자를 제공한다. 이러한 선택자 중에서 :not() 의사-클래스는 독특한 역할을 하며, 개발자들이 특정 요소를 제외하고 스타일링 할 수 있게 한다.

:not() 의사-클래스 소개

:not() 의사-클래스 선택자는 부정 의사-클래스 역할을 한다. 이는 지정된 선택자와 일치하지 않는 모든 요소를 선택하고 스타일링하는 데 특별히 사용된다.

위의 코드는 .special-item 클래스가 없는 모든 <li> 태그에 파란색을 적용한다.

여러 클래스와 :not() 결합하기

:not() 선택자를 사용하여 여러 클래스를 결합하는 기능은 그 유용성을 더욱 확장한다. 이 의사-클래스를 연결함으로써, 개발자들은 요소 대상을 더욱 정교하게 지정하고 한 번에 여러 클래스를 제외할 수 있다.

이 CSS는 .container 내의 모든 문단을 대상으로 하며, .highlight 또는 .important 클래스를 가진 문단을 제외하고 빨간색 스타일을 적용한다.

여러 클래스와 :not() 결합에 대한 고급 시나리오

not()과 여러 클래스를 결합하는 기본적인 내용에 대해 다루었지만, 더 복잡한 사용 사례도 존재한다.

:not() 선택자로, 특정 자식 요소를 대상으로 하면서 다른 요소들을 제외할 수 있다.

이 스니펫은 <section> 내에서 special 클래스가 없는 <div> 요소들을 대상으로 한다. 대상으로 한 <div> 중에서 .highlighted 또는 .important 클래스를 가진 요소들은 제외하고 나머지에 테두리를 적용한다.

이렇게 정밀한 대상 지정은 JavaScript를 사용하여 클래스를 추가하거나 제거하는 필요성을 크게 줄일 수 있다.

복잡한 디자인에서 속성 선택자와 함께 사용되는 :not()

클래스를 기반으로 한 제외를 넘어, :not()은 속성 선택자와도 강력하게 결합한다. 요소의 속성을 기반으로 한 미세한 스타일링이 가능하다.

이 예에서는 "제출" 및 "리셋" 버튼을 제외한 모든 입력 필드에 둥근 모서리 스타일을 적용했다. :not() 선택자와 속성 값의 조합을 활용하면, 클래스나 ID에 과도하게 의존하지 않고 사용자에게 직관적인 시각적 신호를 제공함으로써 사용자 경험을 향상시킬 수 있다.

결론적으로, CSS의 :not() 선택자는 웹 페이지에서 특정 요소를 제외하고 스타일링하는 데 있어 매우 유용하다고 할 수 있다. 본 포스트를 통해 여러분도 :not() 선택자를 다양한 클래스와 함께 더 효과적으로 사용할 수 있는 방법을 학습하셨기를 바란다.