开发者

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 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.


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).

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜