부정가상클래스선택자

not

앞서 공부한 가상클래스선택자들은 이미 알고 있는 selector들에 콜론(:)을 사용해서 뒤에 추가적인 정보를 명시함으로써 selector가 선택하는 HTML요소의 범위를 더 디테일하게 좁히는 용도로 사용했습니다.

마찬가지로 not도 이미 알고 있는 selector을 선택하고 :not() 을 명시해 또다른 selector을 괄호 안에 명시해줍니다.

해석: 앞에 있는 셀렉터들을 먼저 고르되, 그 안에서 ()안에 있는 선택자들을 제외한 나머지입니다.

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

//방법(1) class를 부여
input:not(.pw) {
  background-color: royalblue;
}

//방법(2) attribute셀렉터 사용
input:not([type=password]) {
  background-color: royalblue;
}