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 {
...
...
}
Answer
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; }