CSS에서 선택자가 아닌 와일드 카드를 결합하는 방법

Question

세 가지 상태 중 하나에 div가 있다고 상상해보십시오.

<div id="apple" /> 
<div id="apple" class="expanded" /> 
<div id="apple" class= "collapsed" /> 

펼치기 및 접기 클래스가없는 경우에만 #apple div를 명시 적으로 타겟팅 할 수 있습니까?

내가 만든 것은 #apple :not[id$="ed"]이지만 작동하지 않습니다. 이 두 선택기를 결합 할 수 있습니까?

참고 :이 시나리오에서는 #apple의 스타일을 직접 지정하는 것으로 충분하지 않습니다. 확장 및 축소 클래스가없는 경우에만 선택 영역을 명시 적으로 선택해야합니다. 지원이 필요한 유일한 브라우저는 최신 버전의 Chrome입니다.

Answer 1

#apple:not(.expand):not(.collapsed)이 작동합니다.

Answer 2

#apple:not(.expanded):not(.collapsed) 

그러나 복수 id=apple 개의 요소가있는 것은 유효하지 않습니다. 기술적으로는 다음과 같이 할 수도 있습니다 : #apple:not([class~=expanded]):not([class~=collapsed]). 훨씬 더 일반적 일 수 있습니다. #apple:not([class])

Answer 3

속성 선택기 [class]을 사용하여 모든 클래스를 타겟팅하십시오.

당신이 :not를 사용하고자하기 때문에 당신이 어떤 수업을하지 않는 경우에만 #apple 선택이

#apple:not([class])과 같은 작업을 수행 할 수 있습니다.

근무 예 :

#apple:not([class]) { 
 
    color: red; 
 
}

<div id="apple">no class</div> 
 
<div id="apple" class="expanded">expanded class</div> 
 
<div id="apple" class="collapsed">collapsed class</div>