:not()

요약

부정(negation) CSS 가상 클래스 :not(X)는 인수로 간단한 선택자(selector) X를 취하는 기능 표기법입니다. 인수로 표시되지 않은 요소와 일치합니다. X는 다른 부정 선택자를 포함해서는 안 됩니다.

주의:
  • 쓸모없는 선택자는 이 가상 클래스를 사용하여 작성될 수 있습니다. 예를 들어, :not(*)은 임의 요소가 아닌 모든 요소와 일치합니다. 그래서 규칙이 결코 적용되지 않습니다.
  • 다른 규칙을 다시 작성할 수 있습니다. 가령 foo:not(bar)는 간단한 foo와 같은 요소와 일치합니다. 그럼에도 불구하고 첫 요소의 명시도가 더 높습니다.
  • :not(foo){}<html><body> 포함 뭐든지 foo가 아닌 것과 일치합니다.
  • 이 선택자는 한 요소에만 적용됩니다. 따라서 모든 조상(ancestor)을 제외하는 데 사용할 수 없습니다. 예를 들어, body :not(table) a<tr> 요소가 선택자의 :not() 부분과 일치하기 때문에, 여전히 표 내부 링크에 적용됩니다.

구문

:not(selector) { style properties }

p:not(.classy) { color: red; }
body :not(p) { color: green; }

위의 CSS 및 아래 HTML이 주어진다면...

<p>Some text.</p>
<p class="classy">Some other text.</p>
<span>One more text<span>

이 같은 출력을 얻습니다:

스펙

스펙 상태 설명
Selectors Level 4
The definition of ':not()' in that specification.
Working Draft 인수로 일부 비 간단 선택자를 허용토록 확장.
Selectors Level 3
The definition of ':not()' in that specification.
Recommendation 초기 정의.

브라우저 호환성

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) 9.0 9.5 3.2
Extended arguments No support No support No support No support No support
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 1.0 (1) 9.0 10.0 3.2
Extended arguments No support No support No support No support No support

 

문서 태그 및 공헌자

 이 페이지의 공헌자: Netaras
 최종 변경: Netaras,