: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 선택자와 사용이 불가능합니다.
브라우저 호환성
브라우저 호환성은 아래 표를 참고 바랍니다.
년도 별로 브라우저 버전 지원 현황을 보면 사파리는 2016년부터 지원을 시작했지만, 다른 대부분의 브라우저는 2021년 이후 지원을 하고 있습니다.
'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 |