Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a CSS not equals selector?

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

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

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

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%.


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.


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