부모 클래스를 기반으로 특정 부모의 하위 요소가 아닌 요소를 어떻게 선택합니까?

Question

예를 들어 data-role = "page"div의 하위 항목이 아닌 콘텐츠의 data-role을 가진 두 div를 "modal"클래스로 선택하고 싶습니다. 고급 CSS 선택기에 정통하지 않습니다.

<div> 
    <div data-role="page"> 
     <div data-role="content"></div> 
    </div> 
    <div data-role="page" class="modal"> 
     <div data-role="content"></div> 
    </div> 
    <div data-role="page"> 
     <div data-role="content"></div> 
    </div> 
</div> 

몇 가지 시도를했지만 작동하지 못했습니다. 예 :

[data-role="content"]:not([data-role="page"].modal > :after) 

또는

[data-role="content"]:not([data-role="page"].modal > [data-role="content"]) 

Answer 1

[data-role="page"]:not(.modal) > [data-role="content"] 

이 누구 data-rolepage및 하지 않는 인 클래스 modal을 가지고 모든 요소를 ​​가져옵니다 후 그 data-rolecontent을 모두 그 직계 자녀를 얻을.

실시간 데모 here.

Answer 2

글쎄, 당신은 그것을 할 수있는 :

:not([data-role=page])>[data-role=content] {...} 

그러나 더 나은 compatbility 당신은 당신이 할 수 있는지 확인 할 수 있습니다 :

[data-role=content] {/* define some styles */} 
[data-role=page]>[data-role=content] {/* cancel out the previously-defined styles */}