Question

If they exist in programming),

If I have an HTML form with the following inputs:

<input type="text" />
<input type="password" />
<input type="checkbox" />

I want to apply a style to all inputs that are either type="text" or type="password".

Alternatively, I would settle for all input’s where type != "checkbox".

It seems like I to have to do this:

input[type='text'], input[type='password']
{
   // my css
}

Isn’t there a way to do:

input[type='text',type='password']
{
   // my css
}

or

input[type!='checkbox']
{
   // my css
}

I had a look around, and it doesn’t seem like there is a way to do this with a single CSS selector.

Not a big deal of course, but I’m just a curious cat.

Any ideas?

Answer 1

CSS3 has a pseudo-class called :not()

input:not([type='checkbox']) {    
    visibility: hidden;
}

<p>If <code>:not()</code> is supported, you'll only see the checkbox.</p>
                                      
<ul>
  <li>text: (<input type="text">)</li>  
  <li>password (<input type="password">)</li>       
  <li>checkbox (<input type="checkbox">)</li> 
 </ul>

Multiple selectors

As Vincent mentioned, it’s possible to string multiple :not()s together:

input:not([type='checkbox']):not([type='submit'])

CSS4, which is supported in many of the latest browser releases, allows multiple selectors in a :not()

input:not([type='checkbox'],[type='submit'])

Legacy support

All modern browsers support the CSS3 syntax. At the time this question was asked, we needed a fall-back for IE7 and IE8. One option was to use a polyfill like IE9.js. Another was to exploit the cascade in CSS:

input {
   // styles for most inputs
}   

input[type=checkbox] {
  // revert back to the original style
} 

input.checkbox {
  // for completeness, this would have worked even in IE3!
}