Not CSS selectors

Is there some kind of "not" CSS selector?

For example when I write the following line in my CSS, all input fields inside an tag with class classname will have a red background.

.classname input {
  background: red;
}

How do I select all input fields that are OUTSIDE of a tag with class classname?


Solution 1:


With current browser CSS support, you can't.

Newer browsers now support it- see Sam's answer for more info.

(See other answers for the alternatives in CSS.)


If doing it in JavaScript/jQuery is acceptable, you can do:

$j(':not(.classname)>input').css({background:'red'});

Solution 2:

Mozilla supports negation pseudo-class:

:not(.classname) input {background: red;}

See also: http://developer.mozilla.org/en/Mozilla_CSS_support_chart

Solution 3:

Note that the negation pseudo class is in the Selectors Level 3 Recommendation and works in recent versions of Firefox, Chrome and Safari (at least). Sample code below.

<html>
<head>
<title>Negation pseudo class</title>
<style type="text/css">
    div {
    border: 1px solid green;
    height: 10px;
    }
    div:not(#foo) {
    border: 1px solid red;
    }
</style>
</head>
<body>
    <div id="foo"></div>
    <div id="bar"></div>
    <div id="foobar"></div>
</body>
</html>

Solution 4:

Wouldn't you do that by setting the 'global' background to red, then using the classname to alter the others?

input { background: red; }
.classname input { background: white; }