CSS의 :not(selector) 선택자를 사용하면 지정된 요소를 제외한 나머지 모든 요소에 한 번에 스타일을 적용할 수 있습니다. :not은 부정(negation) 의사 클래스로, 괄호 안에 작성한 선택자와 일치하지 않는 요소들만 골라내는 역할을 합니다.
:not 선택자 예제
아래 코드는 :not 선택자를 실제로 적용한 예제입니다. 모든 문단(<p>)은 빨간색으로, 그 외의 요소(<h1>, <h2>, <h3> 등)는 파란색으로 표시됩니다.
<!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>를 제외한 모든 요소의 글자색을 파란색으로 지정합니다.
이 코드를 실행하면 "Heading 1", "Heading 2", "Heading 3"은 파란색으로 렌더링되고, 두 개의 문단만 빨간색으로 표시됩니다. 이처럼 :not 선택자를 활용하면 특정 요소 하나만 제외하고 나머지 요소 전체에 공통 스타일을 손쉽게 적용할 수 있습니다.