Using the :not CSS selector

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>