CSS3 :not negation pseudo-class not fully supported by Firefox?

Question

I'm trying to use the CSS3 :not pseudo class as defined in the specification. According to the spec:

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

So I would expect to be able to do something like this:

p:not(.class1, .class2)

But it does not seem to work in Safari or Firefox, which are supposed to have FULL support for this selector.

It does work when the argument is a single selector, for example:

Here is an example showing the issue: jsFiddle Example

p:not(.class1)

According to this blog post, this author suggests that you should be able to specify multiple selectors as the argument.

Also according to this CSS3 SitePoint Reference, Firefox, Safari and Chrome have FULL support for the :not selector.

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

Answer 1

In CSS the comma (,) separates selectors. It's not a selector itself so it can't be used inside a selector. So depending of if you want to apply the rule to

• paragraphs that are not .class1 and paragraphs that are not .class2,
• paragraphs that have neither .class1 nor class2 or
• paragraphs that don't have .class1 and .class2

it's

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

or

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

or

p:not(.class1.class2) {
}

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

Answer 2

You can chain them (listing them didn't work for me either)...

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

jsFiddle.

Works for me in Chrome 10.