How do I use the not() syntax in a CSS selector?

Question

Are there any resources on how do I use the not() syntax in a CSS selector?

Such as:

.container[orient="landscape"] > *:not(.toolbar)

If so can you please answer with a link or explanation?

Answer 1

Decent explanation here.

Don't entirely know what you're trying to accomplish with your example, but it'd probably look more like either

.container[orient="landscape"]:not(.toolbar)

or

.container[orient="landscape"] > :not(.toolbar)

Answer 2

here's a link

i think it only works in FF and safari, not so much in IE

Answer 3

Although the :not() operator is useful in certain situations, it is not supported except by the most recent browsers, because it is part of the CSS 3 specification. Firefox 2 and 3, Opera, Safari, Chrome, and other Gecko and Webkit based browsers support it, whereas Trident based browsers (Internet Explorer) do not support it.

It is probably a much better idea at this point in time to use the "cascading" part of CSS:

.container[orient="landscape"] * { ... }
.toolbar {...}

Use the .toolbar selector to override the .container selector.

I should also point out that using the attribute selector [orient="landscape"] is not supported in older browsers, specifically IE 6 and below.

Here is a good guide to CSS 3 features, :not() included: Smashing Magazine: Take Your Design To The Next Level With CSS3