not() 은css에서 뭔가가 적용되는것을 원치 않을때 사용합니다.
예를들어서
p:not(.classy) { color: red; }
body :not(p) { color: green; }
<p>Some text.</p>
<p class="classy">Some other text.</p>
<span>One more text<span>
위와 같은 CSS & HTML 코드가 있다면
p:not(.classy) {color: red; } 이므로 "classy" 라는 클래스가 아닌 p 태그의 색상은 빨간색으로 나오게 될것입니다.
body : not(p) { color: green; } 에서는
body 태그에서 p 태그가 아닌 곳에서의 컬러는 green을 가지게 될 것입니다.
따라서 다음과 같은 출력 결과를 볼 수 있습니다.
Some text.
Some other text.
One more text
developer.mozilla.org/ko/docs/Web/CSS/:not
'프로그래밍 > HTML&CSS' 카테고리의 다른 글
CSS 부모의 opacity를 자식에게 적용하지않는법! (0) | 2020.12.31 |
---|---|
[CSS] box-sizing: border-box; (0) | 2020.12.20 |
CSS 미디어 쿼리 MDN (0) | 2020.12.11 |
CSS animation 관련 유용한 사이트 (0) | 2020.12.10 |
CSS transition 사용할때 유용한 사이트 (0) | 2020.12.08 |