I'm attempting to exclude certain CSS rules when a specific CSS class is defined as a parent using the following rule:
.cc div:not(.cc-ei) li { color: red; }However, this rule does not work in all cases, as evident in the code snippet below and the accompanying 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>