CODEWITHSUNDEEP
csscss-selectorsconditional-operator
Misiur
Misiur

Reputation: 5297

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.

Upvotes: 193

Views: 329307

Answers (10)

Maybe
Maybe

Reputation: 975

Very old question I know, but since this is what came up on the top of my search results, I'll go ahead and answer it with modern day CSS.

Since 2021, all browsers are compatible with the :is and :where pseudo-classes:

  • :where has 0 specificity
  • :is takes on the specificity of its most specific argument. 1

Thus, for the given example in the OP, you'd do either …

/* indentation included for clarity (not required) */
input:not(
  :is(
    [type='checkbox']
    , [type='radio']
  )
)
{
  /* your css declarations here */
}

… or …

/* indentation included for clarity (not required) */
input:not(
  :where(
    [type='checkbox']
    , [type='radio']
  )
)
{
  /* your css declarations here */
}

Upvotes: 5

questioning
questioning

Reputation: 287

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:

div[value*="this"][value*="that"]

In case we want the div that contains either this OR that, you can use a comma between both conditions, like so:

div[value*="this"], div[value*="that"]

Note: You can use as much conditions as you like. This is in no way limited to 2 as shown in the example.

Upvotes: 7

Andrius R.
Andrius R.

Reputation: 189

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.

Upvotes: 1

geofflee
geofflee

Reputation: 3791

&& 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 */
}

Upvotes: 232

waao
waao

Reputation: 369

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]

Upvotes: 36

Serge Profafilecebook
Serge Profafilecebook

Reputation: 1205

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 */
}

Upvotes: 3

Aurish
Aurish

Reputation: 59

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

Upvotes: 4

Jaroslav Z&#225;ruba
Jaroslav Z&#225;ruba

Reputation: 4876

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

Upvotes: 1

kennytm
kennytm

Reputation: 523374

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

Upvotes: 71

Max Shawabkeh
Max Shawabkeh

Reputation: 38603

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.

Upvotes: 5

Related Questions