CODEWITHSUNDEEP
csscss-selectorspseudo-class
Misha Moroshko
Misha Moroshko

Reputation: 171341

Why CSS :not pseudo-class doesn't work as expected?

Consider the following HTML:

<div class="a">
    <div class="b">Hello</div>
  </div>
  <div class="c">
    <div class="b">World</div>
</div>

Adding the following CSS colors only "World" in red, as expected:

.c .b {
  color: red;
}

But, adding the following CSS instead colors both "Hello" and "World" in red:

:not(.a) .b {
  color: red;
}

Why?

Upvotes: 3

Views: 3663

Answers (2)

Lior Elrom
Lior Elrom

Reputation: 20862

Since the :not pseudo-class represents an element that is not represented by its argument, you have to specify the element you want to exclude before the :not selector

Per your example, try this instead:

div:not(.a) .b {
  color: red;
}

Upvotes: 3

PSL
PSL

Reputation: 123739

You need to give it like this:-

Demo

div:not(.a) .b {
  color: red;
}

Pseudo-class :not

Syntax is selector:not(){ properties }

Upvotes: 7

Related Questions