올바르게 사용할 수없는 선택기 .b를 해결하는 방법 .a .b가 아닌?

Question

나는 또한, HTML은 임의의 컨테이너에있을 수 있습니다

.a .b { 
    background-color: cornflowerblue; 
} 

의 방식으로 받아 .a .b

없음 해킹에 .b 아니라 적용 않습니다 CSS를 정의합니다. body > .b뿐만 아니라 내가 :not 선택하거나 여기 codepen 참조 나 .a .b

div { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: cornflowerblue; 
 
    margin: 10px; 
 
    border: 1px solid salmon; 
 
} 
 

 
.b { 
 
    background-color: green; 
 
}

<div class="a"> 
 
    <div class="b"></div> 
 
</div> 
 

 
<div class="b"></div>

의 정의를 변경하지 않는 대체 솔루션을 사용하려면 내 경우

작동하지 않습니다

https://codepen.io/anon/pen/OxOLZE

Answer 1

.a의 하위가 아닌 모든 .b 요소를 선택합니다.

div { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: cornflowerblue; 
 
    margin: 10px; 
 
    border: 1px solid salmon; 
 
} 
 

 
*:not(.a) > .b { 
 
    background-color: green; 
 
}

<div class="a"> 
 
    <div class="b"></div> 
 
</div> 
 

 
<div class="b"></div>