CSS all classes starts with and ignore some child class - html

Question

I have a nested HTML element structure where I need to apply css styles for some condition.
Apply styles to class starts with "a-" in the .a-comp element
Ignore styles to .a-col class and its child elements which have "a-*" class
The code below works for the above scenario. But it doesn't work for other child elements which have "a-*" class.
How can I achieve that?
.a-comp :not(.a-col) [class^="a-"],
.a-comp :not(.a-col) [class*="a-"] {
color: red;
}
<div class="a-comp">
<div class="a-one">
<div class="a-col">
<div class="a-text">
Text1
</div>
</div>
</div>
<div class="a-row">
<div class="a-text">
Text 2
</div>
</div>
</div>
View on JSFiddle

Answer 1

Your selector matches .a-* elements that have an .a-comp ancestor, with some intermediate element that is not .a-col. However, both of your examples match that selector.
The first one has .a-one as a descendant of .a-comp and ancestor of a-text. The second one has .a-row as a descendant of .a-comp and ancestor of a-text.
One solution might be to set the appropriate children of .a-col elements not to be red.
.a-comp [class^="a-"] {
color: red;
}
.a-comp .a-col [class^="a-"] {
color: black;
}
<div class="a-comp">
<div class="a-row">
<div class="a-two">
<div class="a-text">
In a ROW
</div>
</div>
</div>
<div class="a-one">
<div class="a-col">
<div class="a-text">
In a COL
</div>
</div>
</div>
<div class="a-row">
<div class="a-text">
In a ROW
</div>
</div>
<div class="a-one">
<div class="a-something">
<div class="a-text">
In something else
</div>
</div>
</div>
</div>