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