CSS의 :not() 셀렉터 활용하기

안녕하세요 찐망고입니다.

 

CSS의 `:not()` 함수는 특정요소를 제외한 나머지 요소들을 선택할 수 있는 선택자입니다.

 

아래 예시를 볼까요?

<ul class="list">
    <li class="list01">list01</li>
    <li class="list02">list02</li>
    <li class="list03">list03</li>
    <li class="list04">list04</li>
</ul>

.list li:not(.list02) {
	background-color: orange;
}

 list02 클래스를 가진 두 번째 li요소를 제외한 나머지 li요소들에게 오렌지색 배경이 지정됩니다.

 

 

 

다음 예시를 보면

not실렉터를 이용하여 하나의 클래스가 아닌 여러 개의 클래스를 선택할 수 있습니다.

body :not(h1, h2, h3, h4, h5, h6) {
    color: gray;
}

body요소 중 제목요소들을 제외하고 컬러를 그레이로 지정합니다.

 

 

 

not실렉터를 이용하여 특정 타입의 입력필드의 스타일링을 제외시킬 수 있습니다.

input:not([type='password']) {
    border-color: green;
}

password타입인 input요소를 제외한 모든 입력필드의 테두리 색이 green으로 바뀌겠죠?

 

 

 

not셀렉터를 여러 번 사용할 수도 있습니다.

.list li:not(:first-child):not(:last-child) {
    font-weight: bold;
}

li요소의 첫 번째 요소와 마지막요소를 뺀 나머지 li요소의 폰트 두께가 두꺼워지겠네요 ^^