CSS "and" and "or"

Question

I have very big problems because I need to anathematize the styling of some input types. I had something like:

.registration_form_right input:not([type="radio") { //Nah. } 

But I do not want to create flags either.

I tried:

 .registration_form_right input:not([type="radio" && type="checkbox"]) .registration_form_right input:not([type="radio" && "checkbox"]) .registration_form_right input:not([type="radio") && .registration_form_right input:not(type="checkbox"]) 

How to use && ? And soon I will need to use || , and I think the usage will be the same.

Update:
I still don’t know how to use || and && . I could not find anything in the W3 docs.

Answer 1

&& works by combining several so-type selectors:

 <div class="class1 class2"></div> div.class1.class2 { /* foo */ } 

Another example:

 <input type="radio" class="class1" /> input[type="radio"].class1 { /* foo */ } 

"||" works by separating multiple selectors with commas, for example:

 <div class="class1"></div> <div class="class2"></div> div.class1, div.class2 { /* foo */ } 

As a side note, I would recommend not using the no selector because it is not supported by Internet Explorer. Based on one survey, 60% of people use some version of Internet Explorer, so your site will not work for many people.

Answer 2

And ( && ):

 .registration_form_right input:not([type="radio"]):not([type="checkbox"]) 

OR ( || ):

 .registration_form_right input:not([type="radio"]), .registration_form_right input:not([type="checkbox"]) 

Answer 3

To select the a AND b properties of an X element:

 X[a][b] 

To select the a OR b properties of an X element:

 X[a],X[b] 

Answer 4

Class pseudo-class :not supported by IE. Instead, I would get something like this:

 .registration_form_right input[type="text"], .registration_form_right input[type="password"], .registration_form_right input[type="submit"], .registration_form_right input[type="button"] { ... } 

Some duplication is there, but it's a small price to pay for higher compatibility.

Answer 5

I think you hate writing more selectors and separating them with a comma?

 .registration_form_right input:not([type="radio"]), .registration_form_right input:not([type="checkbox"]) { } 

and BTW is

 not([type="radio" && type="checkbox"]) 

looks at me more like "an input that does not have both of these types" :)

Answer 6

Just in case someone is stuck like me. After you sent the message, and some hits and trials it worked for me.

 input:not([type="checkbox"])input:not([type="radio"]) 

Answer 7

You can somehow reproduce the "OR" behavior using and and: not.

 SomeElement.SomeClass [data-statement="things are getting more complex"] :not(:not(A):not(B)) { /* things aren't so complex for A or B */ }