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

Question

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?

Answer 1

You need to give it like this:-

Demo

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

Pseudo-class :not

Syntax is selector:not(){ properties }

Answer 2

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;
}