I am trying to exclude some CSS rules when there is a defined CSS class as a parent with this rule:
.cc div:not(.cc-ei) li { color: red; }
But it doesn't work for all cases, as you can see in the code below, and the linked Codepen demo:
.item { color: green;}.cc div:not(.cc-ei) li { color: red;}
<div class="cc"><div><ul><li>Should be red</li></ul></div><div class="cc-ei"><ul><li class="item">Should be green</li></ul></div><div class="toto"><div class="cc-ei"><ul><li class="item">Should be green</li></ul></div></div></div>
How could I define the rule .cc li { color: red; }
to exclude <li>
that are in <div class="cc-ei">
?