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.

Can't do that with CSS only, as it would take a parent selector, which doesn't exists (yet) — Asons
– Asons, Commented Feb 9, 2019 at 18:31
You can try this jsfiddle.net/0zLonhjc .no-color p {..} p{..} — Vitorino fernandes
– Vitorino fernandes, Commented Feb 9, 2019 at 18:33
"." before an item specifies a css class for that object, try .no-color p{color: blue} — Aditya Shankar
– Aditya Shankar, Commented Feb 9, 2019 at 18:33
If the parent element is known, e.g. they all where a child of the body, this would work though: body > p { color: blue; } — Asons
– Asons, Commented Feb 9, 2019 at 18:35
@LGSon I don't understand what you mean by parent selector ? I edited my code, is that possible now ? — Vald
– Vald, Commented Feb 9, 2019 at 18:45

Asons · Accepted Answer · 2019-02-09 18:53:37Z

2

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>

edited Feb 9, 2019 at 18:53

Asons

87.7k12 gold badges119 silver badges175 bronze badges

answered Feb 9, 2019 at 18:35

Yann39

15.9k11 gold badges64 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Vald Over a year ago

Yes I know, the problem is that I have stylized blockquote (with more than 20 CSS lines), so I have to cancel the 20 CSS properties for the no-color class. I was wondering if there was an easier way with the :not selector

Yann39 Over a year ago

Unfortunaltely as stated by @LGSon this is not possible if you don't apply it from a known parent (I used body here but you can use a closer one of course), because there is no parent selector in CSS.

Asons Over a year ago

@Yann39 Now you can edit your answer, as OP added some more code that will work with your logic.

Yann39 Over a year ago

@LGSon Thanks :)

Nikolas Stevenson-Molnar · Accepted Answer · 2019-02-09 18:52:01Z

1

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

edited Feb 9, 2019 at 18:52

answered Feb 9, 2019 at 18:33

Nikolas Stevenson-Molnar

4,7502 gold badges25 silver badges31 bronze badges

5 Comments

Asons Over a year ago

The markup can't be changed, which make this answer wrong.

Nikolas Stevenson-Molnar Over a year ago

Please see my edited answer, with an additional solution.

Asons Over a year ago

Always try what you suggest before posting it, and if you would, you would see this won't work

Nikolas Stevenson-Molnar Over a year ago

@LGSon You are absolutely right! I did test this latest edit.

Yann39 Over a year ago

This indeed works with new OP requirement, but note that this will not work if you have other enclosing elements arround your p (i.e. <div class="no-color"><div><p>Lorem ipsum</p></div></div>)

jo_va · Accepted Answer · 2019-02-09 18:49:59Z

0

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>

edited Feb 9, 2019 at 18:49

answered Feb 9, 2019 at 18:42

jo_va

14.1k3 gold badges25 silver badges49 bronze badges

Collectives™ on Stack Overflow

Using the :not CSS selector

3 Answers 3

4 Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related