Not CSS selectors

Css Problem Overview

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?

Css Solutions

Solution 1 - Css

~~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 - Css

Mozilla supports negation pseudo-class:

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

Solution 3 - Css

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 - Css

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

Solution 5 - Css

I would do this

input { /* styles outside of .classname */ }
.classname input { /* styles inside of .classname, overriding above */ }

Solution 6 - Css

There is no way to select the parent of matched elements with CSS. You would have to use JavaScript to select them.

From your question I assume you have markup that looks more or less like this:

<form class="formclassname">
	<div class="classname">
		<input />  <!-- Your rule matches this -->
		<input />  <!-- Your rule matches this -->
	</div>
	<input />  <!-- You want to select this? -->
	<input />  <!-- You want to select this? -->
</form>

One option is to add a class to a higher element, say the <form>, and write a rule to style all of the inputs of the form. I.E:

.formclassname input {
  /* Some properties here... */
}

.formclassname > input {
  /* Some properties here... */
}

If you want to select them based on the fact that they are not inside of an element with a specific class, you're out of luck without the use of JavaScript.

Solution 7 - Css

I think the closest you can get is to only affect direct descendants with a declaration

This code for example will only affect input fields directly under divs with class "maincontent"

div.maincontent > input {
  // do something
}

Solution 8 - Css

Inputs are a bit annoying because, unlike most other html elements, there isn't necessarily a way of resetting all the css properties back to their default value.

If the styling is non-critical (ie a nice to have but doesn't affect functionality) I would use jQuery to get an array of all the inputs, check their parents, and then only carry out the styling on those outside that div. Something like:

$('input').each(function() {
     if($(this).closest('.classname') == false)
     {
           // apply css styles
     }
});

(By the way, I'm no jQuery expert, so there might be some errors in the above, but in principle something like this should work)

Content Type	Original Author	Original Content on Stackoverflow
Question	BlaM	View Question on Stackoverflow
Solution 1 - Css	Peter Boughton	View Answer on Stackoverflow
Solution 2 - Css	ultracrepidarian	View Answer on Stackoverflow
Solution 3 - Css	Sam Dutton	View Answer on Stackoverflow
Solution 4 - Css	Harper Shelby	View Answer on Stackoverflow
Solution 5 - Css	Daniel A. White	View Answer on Stackoverflow
Solution 6 - Css	Zack The Human	View Answer on Stackoverflow
Solution 7 - Css	Dan Roberts	View Answer on Stackoverflow
Solution 8 - Css	wheresrhys	View Answer on Stackoverflow