Comment utiliser correctement le: not selector pour résoudre .b mais pas .a .b?

Question

Je veux définir css qui ne s'applique à .b mais pas .a .b

Pas hacks acceptées de la manière de

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

De plus, le code HTML peut être dans un contenant arbitraire. body > .b est aussi bien ne fonctionne pas pour mon cas

Je veux utiliser le sélecteur :not ou une solution alternative qui ne fait pas me changer la définition de .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>

voir codepen ici

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

Answer 1

Ceci sélectionnera tous les éléments .b qui ne sont pas des enfants de .a.

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>