CSS input type selector. Is it possible to have the syntax "or" or "no"?

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 agree to all input, where type != "checkbox" .

It seems to me that I should do this:

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

Is there no way to do:

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

or

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

I looked around, and there doesn't seem to be a way to do this with a single CSS selector.

It doesn't matter, of course, but I'm just a curious cat.

Any ideas?

Answer 1

CSS3 has a pseudo-class : 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> 

---

If you need to support IE8 or earlier, you can use polyfill as IE9.js. Or you could just do this:

 input { // styles for most inputs } input[type=checkbox] { // revert back to the original style } 

These are technically two selectors, but it eliminates the need to think about all types of input that are not “flags”.

Answer 2

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

This is the right way to do it. Unfortunately, CSS is not a programming language.