0

Codepen example is here.

Question. How do I paint yellow all inputs that are NOT descendants of div.b?

My attempt paints all three elements yellow:

:not(.b) input.myInp {background:yellow}

Thanks!

Taplar
  • 24,788
  • 4
  • 22
  • 35
temuri
  • 2,767
  • 5
  • 41
  • 63

2 Answers2

1
:not(.b) > div > p input.myInp {background:yellow}

You need to make the selector specific enough that it does not match with the parent .a element.

Taplar
  • 24,788
  • 4
  • 22
  • 35
  • What to do in the case when input.myInp lives deeper or on a different path altogether? – temuri Jun 05 '19 at 18:21
  • Ideally I would say you may want to consider making a stand alone class that applies the yellow effect, and put it on the input themselves, so you control exactly which ones are affected. – Taplar Jun 05 '19 at 18:24
1

Your selector is not working because you're targeting any element that does not have the class .b but has an <input> descendant, and since the input has two ancestor elements which don't have this class the rule applies to them as well.

You should just specify that you're referring to the container's themselves by including the parent in your selector:

div.a > :not(.b) input.myInp {background:yellow}