CSS3: isn't denial pseudo-class not fully supported by Firefox?

Question

I am trying to use CSS3: not a pseudo-class, as defined in the specification. According to spec :

The pseudo-class of the negation class: not (X), is a functional notation that uses a simple selector (excluding the negation of the pseudo-class itself) as an argument. It is an element that is not represented by its argument.

So I would expect that I could do something like this:

p:not(.class1, .class2) 

But it does not work in Safari or Firefox, which must have FULL support for this selector.

It works when the argument is the only selector, for example:

Here is an example showing the problem: jsFiddle example

 p:not(.class1) 

According to this blog post, this author suggests that you specify several selectors as an argument.

Also in accordance with this CSS3 SitePoint Reference , Firefox, Safari and Chrome have FULL support for: not selector.

Am I misinterpreting the specification or do browsers only have partial support for this selector?

Answer 1

In CSS, a comma ( , ) separates selectors. This is not a selector, so it cannot be used inside a selector. Therefore, depending on whether you want to apply the rule to

• which are not .class1 and paragraphs that are not .class2 ,
• which have neither .class1 , nor class2 , or
• that do not have .class1 and .class2

this is

 p:not(.class1), p:not(.class2) { } 

or

 p:not(.class1):not(.class2) { } 

or

 p:not(.class1.class2) { } 

BTW, IMHO it is better to avoid :not , if possible, and in this case, for example, have a general rule that applies to all p (with the properties that you want to set in the rule :not ) and one that applies to classes with a class and, if necessary, overrides the properties of the first rule.

Answer 2

You can link them (the list doesn't work for them either) ...

 p:not(.class1):not(.class2) { ... } 

jsFiddle .

Works for me in Chrome 10.

Answer 3

Be careful:

 p:not(.class1), p:not(.class2) { } 

Because it is the same as calling p {} (when you separate the ",", it means concatenation). The first installed tag set (p tags without classes class1 ) with the second installed tags installed (p tags without class class2 ).