CSS :not() 선택자 (~이 아닐 때)

:not() 선택자의 뜻과 기본 사용법

CSS :not() 선택자는 특정 조건에 일치하지 않은 요소를 선택하는 데 사용합니다. 아래 코드와 같이 괄호 안에 특정 조건을 입력하는 방식입니다. 

// p 태그가 아닌 요소
:not(p) { margin:0; }

// .last 요소가 아닌 div
div:not(.last) { margin-bottom:20px; }

 

:not 선택자의 응용

괄호 안에 HTML 엘리먼트를 작성하거나, 클래스/Id 네임을 작성하는 방식으로도 작성하지만 조금 더 복합적으로 사용할 수 있습니다. 아래 코드와 같이 콤마로 여러 조건 값을 쓰거나 [disabled], [readonly] 처럼 상태를 쓸 수 있습니다.

 

See the Pen Untitled by flexbox (@flex-grow) on CodePen.

 

:not() 선택자를 사용하지 않았을 때와 코드를 비교해보겠습니다. 물론 기존 코드도 여러 방식으로 작성이 가능하겠지만 직관적으로 이해할 수 있는 코드로 작성해보았습니다. 일반 텍스트 박스의 hover 디자인, disabled의 hover 디자인, readonly의 hover 디자인을 각각 선언해야만 했던 것을 not 선택자를 사용함으로써 단 한줄로 줄일 수 있게 되었습니다.

 

/* :not() 선택자 활용 */
input[type="text"]:not([disabled], [readonly]):hover { border-color:blue; }

/* 기존 코드 */
input[type="text"]:hover { border-color:blue; }
input[type="text"][disabled]:hover { border-color:#000; }
input[type="text"][readonly]:hover { border-color:#000; }

 

:not() 선택자의 제한사항

  • :not(:not()) 처럼 중첩해 사용이 불가능합니다.
  • :before, :after 선택자와 사용이 불가능합니다.

브라우저 호환성

브라우저 호환성은 아래 표를 참고 바랍니다. 

CSS :not() 선택자의 브라우저 지원 현황

 

년도 별로 브라우저 버전 지원 현황을 보면 사파리는 2016년부터 지원을 시작했지만, 다른 대부분의 브라우저는 2021년 이후 지원을 하고 있습니다. 

 

not() 선택자의 년도별-브라우저 지원현황

'HTML&CSS' 카테고리의 다른 글

CSS :is() 선택자  (0) 2024.09.27
CSS :where() 선택자  (0) 2024.09.26
[CSS] 근접, 자식요소에 따라 부모요소를 제어할 때 :has()  (1) 2024.09.16
CSS의 중첩 (CSS nesting)  (0) 2024.09.16
CSS의 변수(Variables)  (0) 2024.09.15