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 and some explanation?

Answer 1

Although the :not() pseudo-class 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