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 속성이 있는 태그 제외를 한다면 아래와 같은 결과가 나온다.
'웹 프론트 엔드' 카테고리의 다른 글
CSS 선택자 - 가상 요소 선택자 (0) | 2024.03.12 |
---|---|
CSS 가상 클래스 선택자 - 동적 가상 클래스 선택자 (0) | 2024.03.12 |
CSS 선택자 - 가상 클래스 선택자 : child & of-type (0) | 2024.03.11 |
CSS 선택자 - 속성 선택자 (0) | 2024.03.11 |
CSS 선택자 - 주요 선택자 (0) | 2024.03.11 |