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?
Add a comment
|
4 Answers
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
Comments
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)
1 Comment
BoltClock
The second selector is identical to the one given.
i think it only works in FF and safari, not so much in IE
Comments
I would like to share an observation on combining psuedo-classes which may be useful to future seekers of information on using :not(). When using :not() in combination with the :first-line pseudo-class, I discovered that :not() must be listed first and :first-line afterwards, rather than the other way around. In the following css example:
.content h1 {
font-size: 36px;
line-height: 34px;
text-transform: uppercase;
font-weight: bold;
}
.content h1:not(.second):first-line {
color: #971d2d;
}
.content h1.first {
color: #444;
}
.content h1.second {
color: #666;
}
.content h1.second:first-letter {
color: #030303;
}
Placing ":not(.second)" after the ":first-line" will not only fail to work properly, but will adversely impact other declarations in the cascade.
Think of your syntax as being in the same order as it would be if you were using a scripting language. Thus something like this:
if ( $('h1') && !$('.second') ) {
this.usePseudoClass(':first-line');
}
would make logical sense to accomplish the task, rather than something like this:
if ($('h1:first-line') {
!(this.useClass('.second')
}
which would not.
Cheers, hope this input will be helpful to others.
