[CSS] :not() 가상 클래스(의사 클래스)

:not()

특정 selector을 제외하고 스타일을 적용하고 싶은 경우 사용

CSS

.parents p:not(.fisrt) {
  background-color: green;
  color: #fff;
}
.parents span:not(.fourth) {
  background-color: gray;
  color: #fff;
}
.parents .fifth :not(p) {
  font-style: italic; text-decoration: underline;
}

p:not(.fisrt)

p 요소 중에 first 클래스를 가지고 있지 않는 요소 선택

span:not(.fourth)

span 요소 중에 fourth를 가지고 있지 않는 요소 선택

.fifth :not(p)

fifth 클래스를 가진 요소의 자식들 중에 p요소를 가지고 있지 않은 요소 선택

HTML

<div class="parents">
  <p class="first">1. first를 가지고 있는 p요소</p>
  <span class="second">2. fourth를 가지고 있지 않은 span요소</span>
  <p class="third">3. first를 가지고 있지 않은 p요소</p>
  <span class="fourth">4. fourth를 가지고 있는 span요소</span>
  <div class="fifth">
    <p>5-1. first를 가지고 있지 않은 p요소/fifth의 자식요소 중 p요소</p>
    <div>5-2. fifth의 자식요소 중 p요소를 가지고 있지 않은 div요소</div>
  </div>
</div>

결과

1. first를 가지고 있는 p요소

2. fourth를 가지고 있지 않은 span요소

3. first를 가지고 있지 않은 p요소

4. fourth를 가지고 있는 span요소

5-1. first를 가지고 있지 않은 p요소/fifth의 자식요소 중 p요소

5-2. fifth의 자식요소 중 p요소를 가지고 있지 않은 div요소