[CSS] 특정 요소 css 제외 (:not)

부트스트랩을 이용하고, summernote 에디터를 사용하는데,

css의 checkbox 라는 클래스 때문에 에디터 툴바 기능 중 링크의 체크박스가 먹통이었다.

 

체크박스 클릭이 안됨

해당 클래스를 제외 시키려고 js로 클래스 제거를 시도해 봤지만 

에디터 로딩 시점과 클래스 제거 되는 시점이 안맞아 제거가 안되는것 같았다.

 

이 후 사용하게 된게 :not 선택자

 

사용방법은 아주 간단하다.

 

선택할 요소:not(제외할 특정요소){

.......

}

 

 

아래는 내가 적용한 코드, 두 개의 :not 선택자를 사용할 때에는 연달아서 적어주면 된다.

 

.checkbox label:not(.sn-checkbox-open-in-new-window):not(.sn-checkbox-use-protocol )  {
	display: inline-block;
}
.checkbox label::before:not(.sn-checkbox-open-in-new-window):not(.sn-checkbox-use-protocol ) {
	background-color: #e2e7f1;
}

.checkbox input[type="checkbox"]:not(.sn-checkbox-open-in-new-window label input) :not(.sn-checkbox-use-protocol label input){
	cursor: pointer;
}