CSS3 :not negation pseudo-class not fully supported by Firefox?
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 sugges开发者_运维技巧ts 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?
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
norclass2
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 p
s (with the properties you want to set in the :not
rule) and one that applies to ones with the class and overrides the properties of the first rule if necessary.
You can chain them (listing them didn't work for me either)...
p:not(.class1):not(.class2) {
...
}
jsFiddle.
Works for me in Chrome 10.
Be careful with:
p:not(.class1), p:not(.class2) {
}
Because, it is same as calling p {}
(when you separate by ",", it means union). The first effected tags set (the p tags without the class1
class) unions with the second effected tags set (p tags without the class2
class).
精彩评论