프로그래밍/HTML&CSS

CSS not()

삐제제 2020. 12. 14. 23:28

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