Search code examples
csscss-selectorspseudo-class

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?

Solution

  • You need to give it like this:-

    Demo

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

    Pseudo-class :not

    Syntax is selector:not(){ properties }