CSS에서 :not(선택자)는 부정(negation) 의사 클래스로, 괄호 안에 지정한 요소를 제외한 나머지 모든 요소에 스타일을 적용할 때 사용합니다. 예를 들어 특정 태그만 빼고 다른 요소들의 색상이나 서식을 한 번에 변경하고 싶다면, 일일이 각각의 선택자를 작성하는 대신 :not() 하나로 간결하게 처리할 수 있습니다.
아래 예제 코드는 <p> 태그가 아닌 모든 요소에 파란색 글자를 적용하는 방법을 보여줍니다. 직접 실행해 보면서 동작 방식을 확인해 보세요.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
}
:not(p) {
color: blue;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>코드 설명
위 코드에서는 두 가지 규칙이 사용되었습니다.
- p { color: red; } – 모든 문단(<p>) 요소의 글자 색을 빨간색으로 지정합니다.
- :not(p) { color: blue; } – <p> 태그를 제외한 나머지 모든 요소(h1, h2, h3 등)의 글자 색을 파란색으로 지정합니다.
따라서 화면에는 제목(Heading 1~3)은 파란색으로 표시되고, 두 개의 문단만 빨간색으로 렌더링됩니다. 이처럼 :not() 선택자를 활용하면 원치 않는 요소를 손쉽게 걸러낼 수 있어 코드가 더 짧고 유지보수하기 쉬워집니다.
참고 사항
:not() 안에는 단순한 태그 이름뿐 아니라 클래스(.class), 아이디(#id), 속성 선택자 등 다양한 단순 선택자를 조합해 사용할 수 있습니다. 다만 복잡한 선택자 조합은 브라우저 호환성과 성능에 영향을 줄 수 있으므로, 필요 이상으로 중첩하지 않는 것이 좋습니다.