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?

Using :not() to exclude parent elements is not reliable - see stackoverflow.com/questions/7084112/… — BoltClock
– BoltClock, Commented May 7, 2013 at 19:59

PSL · Accepted Answer · 2013-05-07 03:23:37Z

7

You need to give it like this:-

Demo

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

Pseudo-class :not

Syntax is selector:not(){ properties }

answered May 7, 2013 at 3:23

PSL

124k21 gold badges257 silver badges243 bronze badges

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

5 Comments

BoltClock Over a year ago

The syntax does not actually require the :not() to be qualified by anything, but it's good practice anyway.

PSL Over a year ago

Thanks @BoltClock but looking at the syntax and examples in the documentation and trying without :not(.a) .b it did not make the appropriate selection atleast in Chrome. I have also used it this way myself.. Probably i am missing something.. :|

BoltClock Over a year ago

Yep, what I'm basically saying is that it works without the "selector" part but like you mentioned it doesn't do what you expect. Also see my comment link on the question.

BoltClock Over a year ago

@Mr Lister: Hm? They do handle both of them equivalently and according to spec...

Mr Lister Over a year ago

@BoltClock Sorry, I had trouble looking beyond these answers, which turned out to be incorrect after all.

Lior Elrom · Accepted Answer · 2013-05-07 03:56:33Z

3

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

edited May 7, 2013 at 3:56

answered May 7, 2013 at 3:25

Lior Elrom

21.1k16 gold badges83 silver badges94 bronze badges

1 Comment

BoltClock Over a year ago

No... the argument is what's inside the parentheses - in this case it's .a, which you are excluding, not div, which is what you want to limit the selector to. Also see my comment on PSL's answer.

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related