Using the :not CSS selector - html

Question

I want to color all my p in blue, except the one inside the no-color div.
I tried p:not(.no-color), :not(.no-color) p, div:not(.no-color) p but I think I misunderstand something
p:not(.no-color) {
color: blue;
}
<div class="container">
<p>Lorem ipsum</p>
<div class="no-color"><p>Lorem ipsum</p></div>
<p>Lorem ipsum</p>
<div class="random-class"><p>Lorem ipsum</p></div>
</div>
Edit: The HTML code is retrieved automatically, so I can't choose on which elements I apply the classes. I can only stylize in CSS.

Answer 1

You can use something like this if you can't modify the HTML :
.container > p,
.container > div:not(.no-color) > p {
color: blue;
}
<div class="container">
<p>Lorem ipsum</p>
<div class="no-color">
<p>Lorem ipsum</p>
</div>
<p>Lorem ipsum</p>
<div class="random-class">
<p>Lorem ipsum</p>
</div>
</div>

Answer 2

This selector should work, without modifying the HTML:
:not(.no-color) > p {
color: blue;
}
<div class="container">
<p>Lorem ipsum</p>
<div class="no-color"><p>Lorem ipsum</p></div>
<p>Lorem ipsum</p>
<div class="random-class"><p>Lorem ipsum</p></div>
</div>
(Sorry for my previous, unhelpful answers... I actually tested this one!)
EDIT: Fixed answer

Answer 3

I would place the class on the <p> instead, then p:not(.no-color) would work.
If however, you can't change the HTML structure, you can target <p>s which are descendants of an element with a .no-color class by using the .no-color p selector and then set the color to inherit.
Setting the color to inherit allows you to get the color of the enclosing parent without specifying it.
This technique works for arbitrarily nested <p> elements below a .no-color parent.
p {
color: blue;
}
.no-color p {
color: inherit;
}
<p>Lorem ipsum</p>
<div class="no-color">
<p>Lorem ipsum</p>
</div>
<p>Lorem ipsum</p>
<div class="no-color">
<div>
<p>Lorem ipsum</p>
</div>
</div>