CSS 선택자 - 가상클래스 선택자 : not

 

 

 

selector:not(조건)

   - 조건에 해당하지 않는 선택자에 스타일을 적용한다

   - 몇개의 공통된 요소를 가진 태그를 제외하고 

/* CSS */
input:not(.pw){
    background-color: indianred;
}

<!-- HTML --> 
<form>
	<input type="text" placeholder="name" />
	<input type="email" placeholder="email" />
	<input class="pw" ; type="password" placeholder="password" />
	<input type="submit" />
</form>

   > css에는 class=pw인 태그를 제외하는 not 선택자를 사용하였습니다.

 

실행 결과

   위와 같이 class=pw 로 설정된 password input 만 배경색이 적용되지 않은 것을 볼 수 있습니다.

 

input:not([placeholder]){
    background-color: indianred;
}

   > 위와같이 placeholder 속성이 있는 태그 제외를 한다면 아래와 같은 결과가 나온다.

실행 결과