CSS의 :not() 가상 클래스(pseudo-class)를 활용하면, 특정 값을 가지지 않거나 지정한 선택자와 일치하지 않는 요소만 골라내어 스타일을 정교하게 적용할 수 있습니다. 즉, 조건을 '제외'하는 방식으로 선택 범위를 좁히는 셈입니다.
기본 문법
선택자:not(제외할_조건) { ... }:not() 안에는 단순 선택자뿐 아니라 복합 선택자도 넣을 수 있어, 다양한 상황에서 유용하게 사용됩니다.
예제 1 — 부모 요소 안에 있지 않은 p 태그 선택
아래 예제는 div 안에 포함되어 있지 않은 p 요소에만 별도의 스타일을 적용합니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: cornflowerblue;
color: white;
}
p:not(div>p) {
background-color: khaki;
font-size: 1.4em;
font-style: italic;
color: blue;
}
</style>
</head>
<body>
<div>
<p>Curabitur sapien diam, imperdiet ut est sed, blandit blandit velit. Nunc viverra nunc id ligula ultricies, a fringilla lacus interdum. <span>Sed vel diam at magna pellentesque porttitor.</span>
</p>
<h3>Demo</h3>
</div>
<p> Ut rutrum sapien sit amet sapien lacinia, at ullamcorper felis lobortis. Praesent dignissim vel turpis nec ultricies.</p>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
div 내부에 있는 p는 기본 스타일(파란 배경, 흰 글자)을 그대로 유지하고, div 바깥에 있는 p만 카키색 배경과 이탤릭체가 적용된 것을 확인할 수 있습니다.
예제 2 — .parent 클래스가 없는 div 선택
다음 예제는 .parent 클래스를 가지고 있지 않은 div 요소에 내부 그림자 효과를 적용합니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 2%;
background-color: cadetblue;
padding: 10%;
height: 80px;
}
div:not(.parent) {
box-shadow: inset 0 0 24px tomato;
padding: 2%;
}
.parent{
border: 4px ridge orange;
}
.one {
background-color: lightgreen;
border: 4px groove gray;
}
.two{
height: 20px;
}
</style>
</head>
<body>
<div class="parent">
<div class="one">
<div class="two"></div>
<div class="two"></div>
</div>
<div class="one"></div>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
.parent 클래스를 가진 최상위 div는 주황색 ridge 테두리만 적용되고, 나머지 자식 div들에는 토마토색 내부 그림자(inset box-shadow)가 나타나는 것을 볼 수 있습니다.
정리
:not() 선택자는 특정 조건에 해당하는 요소를 제외하고 싶을 때 매우 유용합니다. 예를 들어 마지막 항목을 제외한 목록에 구분선을 넣거나(li:not(:last-child)), 특정 클래스가 없는 요소에만 강조 스타일을 주는 등의 패턴에 폭넓게 활용할 수 있습니다.