선택자:not(선택자)

영어 not 은 "~이 아니다"

선택자 중에서 해당 선택자를 제외한 나머지를 일괄 적용시킨다

 

li:not(.li1) {color: red;}

▶ 클래스값 li1 을 제외한 나머지 li의 텍스트 색을 빨간색으로 변경함

 

li:not(:last-child) {border-bottom: 1px solid #ccc;} 

▶ 마지막 li를 제외한 나머지 li 태그에 1px의 두께를 가진 색상 #CCC의 밑줄을 넣음

 

li:not(:first-child)::before {content: "#";} 

▶ li의 처음을 제외한 나머지의 li 요소의 앞에 기호 "#"을 삽입함

가상선택자에도 사용이 가능하다고 말씀드린게 이 예시 입니다. 예제에서의 결과를 보시면 처음을 제외한 나머지 li의 텍스트 앞에 샵이 들어간것을 확인하실 수 있습니다. 보통 가상요소를 마크업 할 때는 콜론을 두개 사용하는게 기본이지만, 하나만 마크업 해도 괜찮습니다. 아무튼 가상요소인 :before 혹은 :after 를 사용해서 일괄 적용시킬수도 있다는 점을 알고 계시면 됩니다.

출처: https://rgy0409.tistory.com/3118 [친절한효자손 취미생활]