Is there a CSS not equals selector?

HtmlCssCss Selectors

Html Problem Overview


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

Html Solutions


Solution 1 - Html

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; }

Solution 2 - Html

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

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

Solution 3 - Html

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

  width:100%;
}```

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

Solution 4 - Html

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.

Solution 5 - Html

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

Solution 6 - Html

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"/>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAlex IvasyuvView Question on Stackoverflow
Solution 1 - HtmlTomas AschanView Answer on Stackoverflow
Solution 2 - HtmlAvatarKavaView Answer on Stackoverflow
Solution 3 - HtmlDylan AutyView Answer on Stackoverflow
Solution 4 - HtmlAndy EView Answer on Stackoverflow
Solution 5 - HtmlNaveedView Answer on Stackoverflow
Solution 6 - HtmlQazzianView Answer on Stackoverflow