Search code examples
csscss-selectorsconditional-operator

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.

Solution

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

    <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 like-so:

    <div class="class1"></div>
<div class="class2"></div>

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