1

I want to apply styles to all input elements that are not in #mydiv div element.

input[type="text"], 
input[type="password"]:not(:in(#mydiv)) /* something like this */
{
    border: 1px solid #ccc;
    padding: 1px;
    color: #444; 
    min-width: 70px;
}
karaxuna
  • 26,752
  • 13
  • 82
  • 117
  • 1
    The closest you can get is with jQuery's `:not()`, as `$('input[type="password"]:not(#mydiv *)')`, but it's not valid CSS (see [here](http://stackoverflow.com/questions/10711730/whats-the-difference-in-the-not-selector-between-jquery-and-css) for why). – BoltClock Aug 20 '12 at 08:12

2 Answers2

4

It's not possible to do that using css (with todays browsers anyway).

But you can do it in reverse:

input[type="text"], input[type="password"] {
  border: 1px solid #ccc;
  padding: 1px;
  color: #444; 
  min-width: 70px;
}

#mydiv input[type="text"], #mydiv input[type="password"] {
  border: none;
  padding: 0px;
  color: inherit;
  min-wdith: 0px;
}

You apply to the styles to everything, then add reversing styles all the ones inside the special div.

Ariel
  • 25,995
  • 5
  • 59
  • 69
  • You're not going to be able to restore the default input styles this way, which is unfortunate. – BoltClock Aug 20 '12 at 08:07
  • @BoltClock I know, but this is the best you can do. The default styles are pretty similar anyway once you can target button types vs text types. Macs have rounded corners, but otherwise it's reasonably uniform. – Ariel Aug 20 '12 at 08:09
1

CSS2 does not have a not in clause

Your solution will be to give them all a specific class

input.my_class {
  ...
}

CSS3 has the :not() but it does not traverse the parent.

Ibu
  • 42,752
  • 13
  • 76
  • 103
  • 2
    Please don't link to that article. It's terribly misinformed. Link to the spec instead: http://www.w3.org/TR/css3-selectors/#negation – BoltClock Aug 20 '12 at 08:09