CODEWITHSUNDEEP
htmlcss
Vald
Vald

Reputation: 237

Using the :not CSS selector

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.

Upvotes: 1

Views: 65

Answers (3)

Yann39
Yann39

Reputation: 15719

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>

Upvotes: 2

Nikolas Stevenson-Molnar
Nikolas Stevenson-Molnar

Reputation: 4700

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

Upvotes: 1

jo_va
jo_va

Reputation: 13963

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>

Upvotes: 0

Related Questions