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.
This question is related to
css
css-selectors
conditional-operator
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"])
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.
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]
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 */
}
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.
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"])
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" :)
Source: Stackoverflow.com