CSS "and" and "or"

I've got quite big trouble, because i need to anathematise from styling some input types. I had something like:

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

But i don't want to style checkboxes too.

I've 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 I'll need to use || soon, and I think that usage will be same.

Update:
I still don't know how to use || and && correctly. I couldn't find anything in W3 docs.

9 Answers

&& works by stringing-together multiple selectors like-so:

<div></div> div.class1.class2 { /* foo */ }

Another example:

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

|| works by separating multiple selectors with commas like-so:

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

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"])

To select properties a AND b of a X element:

X[a][b]

To select properties a OR b of a X element:

X[a],X[b]

The :not pseudo-class is not supported by IE. I'd got for something like this instead:

.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 there, but it's a small price to pay for higher compatibility.

Just in case if any one is stuck like me. After going though the post and some hit and trial this worked for me.

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

You can somehow reproduce the behavior of "OR" using & 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 */ }

I guess you hate to write more selectors and divide them by a comma?

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

and BTW this

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

looks to me more like "input which does not have both these types" :)

A word of caution. Stringing together several not selectors increases the specificity of the resulting selector, which makes it harder to override: you'll basically need to find the selector with all the nots and copy-paste it into your new selector.

A not(X or Y) selector would be great to avoid inflating specificity, but I guess we'll have to stick to combining the opposites, like in this answer.

If we want to look for a div that contains both this AND that in their value attribute, we can simply connect both conditions, like so: