:not() 가상선택자

이서현·2022년 4월 25일
0
:not(p) {
  color:yello;
}

:not([type="text"]){
	color:green;
}
:not(.black) {
  color: black;
}

다양한 selector을 사용할 수 있다


번외

disabled인 애들을 hover 했을 때만 적용 되는 코드르 쓸 수 있지만
background-color: $blue; 가 두 번 반복된다.

.btn-primary {
  @extend %btn-base;
  color: $white;
  background-color: $blue;

  &:hover {
    background-color: $blue-dark;
  }
  &:disabled:hover {
    background-color: $blue;
  }
}

disabled가 아니 애들을 hover했을 때만 변할 수 있게 작성이 가능하다.

.btn-primary {
  @extend %btn-base;
  color: $white;
  background-color: $blue;

  &:not(:disabled):hover {
    background-color: $blue-dark;
  }

}
profile
🌿💻💪🧠👍✨🎉

0개의 댓글