DEV/CSS
:not() 선택자
young.gratia
2021. 6. 15. 14:22
https://developer.mozilla.org/en-US/docs/Web/CSS/:not
:not() - CSS: Cascading Style Sheets | MDN
The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.
developer.mozilla.org
요즘에 자주 사용하고 있는 선택자! `:hover` 같은 가상 클래스의 경우, disabled 된 폼 요소는 예외처리 할 필요가 있다. 그러면 `:hover:not(:disabled)` 같이 써주면 깔끔하게 해결된다.
다만, 목록으로 인자를 넘기는 방식(ex: :not(div, span))은 IE를 비롯한 몇몇 브라우저에서 지원이 되지 않으므로 폭 넓은 기기를 지원하려면 `:not(div):not(span)` 같이 나눠서 쓰는 편이 좋다.