CODEWITHSUNDEEP
csscss-selectors
Kevin
Kevin

Reputation: 9389

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

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?

Upvotes: 1

Views: 892

Answers (4)

code-sushi
code-sushi

Reputation: 719

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.

Upvotes: 0

Austin Hyde
Austin Hyde

Reputation: 27456

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

Upvotes: 4

Jason
Jason

Reputation: 52547

here's a link

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

Upvotes: 1

chaos
chaos

Reputation: 124365

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)

Upvotes: 1

Related Questions