CODEWITHSUNDEEP
csscss-selectors
BlaM
BlaM

Reputation: 28858

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?

Upvotes: 73

Views: 68263

Answers (8)

Peter Boughton
Peter Boughton

Reputation: 112170


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

Upvotes: 53

ultracrepidarian
ultracrepidarian

Reputation: 1118

Mozilla supports negation pseudo-class:

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

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

Upvotes: 32

Sam Dutton
Sam Dutton

Reputation: 15269

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>

Upvotes: 31

wheresrhys
wheresrhys

Reputation: 23500

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)

Upvotes: 0

Zack The Human
Zack The Human

Reputation: 8481

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... */
}

Or

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

Upvotes: 1

Dan Roberts
Dan Roberts

Reputation: 4694

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
}

Upvotes: 0

Daniel A. White
Daniel A. White

Reputation: 190941

I would do this

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

Upvotes: 10

Harper Shelby
Harper Shelby

Reputation: 16583

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

Upvotes: 24

Related Questions