Is there a CSS not equals selector?

Is there something like != (not equal) in CSS? e.g, I have the following code:

input {
...
...
}

but for some inputs I need to void this. I'd like to do that by adding the class "reset" to the input tag, e.g.

<input class="reset" ... />

and then simply skip this tag from CSS.

How I can do that?

The only way I can see would be to add some class to the input tag, and rewrite the CSS as follows:

input.mod {
...
...
}
105949 次浏览
小开

You can also do that by 'reverting' the changes on the reset class only in CSS.

INPUT {
padding: 0px;
}
INPUT.reset {
padding: 4px;
}
小开

CSS3 has :not(), but it's not implemented in all browsers yet. It is implemented in the IE9 Platform Preview, however.

input:not(.reset) { }

http://www.w3.org/TR/css3-selectors/#negation

In the meantime, you'll have to stick to the old-fashioned methods.

小开
最佳答案

In CSS3, you can use the :not() filter, but not all browsers fully support CSS3 yet, so be sure you know what you're doing which is now supported by all major browsers (and has been for quite some time; this is an old answer...).

Example:

<input type="text" value="will be matched" />
<input type="text" value="will not be matched" class="avoidme" />
<input type="text" value="will be matched" />

and the CSS

input:not(.avoidme) { background-color: green; }

Note: this workaround shouldn't be necessary any more; I'm leaving it here for context.

If you don't want to use CSS3, you can set the style on all elements, and then reset it with a class.

input { background-color: green; }
input.avoidme { background-color: white; }
小开

instead of class="reset" you could reverse the logic by having class="valid" You can add this by default and remove the class to reset the style.

So from your example and Tomas'

input.valid {
...
...
}

and 

<input type="text" value="will be matched" class="valid"/>
<input type="text" value="will not be matched" />
<input type="text" value="will be matched" class="valid"/>
小开

Interesting just tried this for selecting DOM element using JQuery and it works! :)

$("input[class!='bad_class']");

This page has 168 divs which does not have class 'comment-copy'

$("div[class!='comment-copy']").length => 168
$("div[class!='.comment-copy']").length => 168
小开

You could also approach this by targeting an attribute like this:

input:not([type=checkbox]){ width:100%; }

In this case all inputs that are not 'checkbox' type will have a width of 100%.


提交答案