[ CSS/SCSS ] :not() 사용법

CSS3에서 리스트에서 특정 리스트만 색을 주지 않거나, 밑줄을 빼고 싶을때 사용합니다.

 

선택자 :not() 사용법

:not() 선택자는 ()안에 선택자를 제외한 나머지에게 일괄적으로 적용시킨다는 의미입니다.

HTML

<ul>
  <li>1번입니다.</li>
  <li>2번입니다.</li>
  <li class="work">3번입니다.</li>
  <li>4번입니다.</li>
  <li>5번입니다.</li>
  <li>6번입니다.</li>
</ul>

 

CSS

li {
  list-style: none;
}
li:not(.work) {
  color: green;
}
li:not(:first-child) {
  border-bottom: 1px solid #ddd;
}
li:not(:last-child) {
  font-weight: bold;
  font-size: 1.2rem;
}
li:not(:nth-child(4)) {
  font-style: italic;
}

위 코드에 li태그들을 살펴보면 하나의 태그만 제외하고 나머지에는 모두 CSS적용이 된 것을 확인 할 수 있습니다.

 

클래스로 적용시키기

li:not(.work) { color: green; } // .work 클래스를 제외한 나머지 <li></li>태그에 컬러를 초록색으로 바꿔줍니다.

 

첫번째 li만 빼고 적용시키기

li:not(:first-child) { border-bottom: 1px solid #DDD; } // 첫번째 <li></li>태그만 빼고 아래 선을 추가해줍니다.

 

마지막 li만 빼고 적용시키기

li:not(:last-child) { font-weight: bold; font-size: 1.2rem; } // 마지막 <li></li>태그만 빼고 글씨를 굵게, 글씨 크기를 1.2rem으로 늘려줍니다.

 

특정 순서에 있는 li만 빼고 적용시키기

li:not(:nth-child(4)) { font-style: italic; } // 4번째 <li></li>태그만 빼고 기울임을 추가해줍니다.

 

이외에도 가상선택자 ( ::before, ::after )에도 사용이 가능합니다.

li:not(:first-child)::before { content: "#"; } // 첫번째 <li></li>태그만 빼고 #을 추가해줍니다.

 

이렇게 :not()선택자 하나만으로 여러가지 가능성을 발견 할 수 있었습니다.