181

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.

5
  • 29
    "anathematise" Yikes. You want to threaten people attempting to style checkboxes with devine retribution? (You probably meant "exempt" or similar, e.g., "I need to exempt some input types from a styling rule.") May 9, 2010 at 9:01
  • 7
    Well, i couldn't find good translation to phrasal verb from my language ;)
    – Misiur
    May 9, 2010 at 9:06
  • 7
    I think @T.J. Crowder probably understood that. But it was funny...particularly the irony of his misspelling 'divine' =D May 9, 2010 at 10:32
  • 1
    Great ngram, though. ;^)
    – ruffin
    Jan 11, 2016 at 19:52
  • Possible duplicate stackoverflow.com/questions/12340737/…
    – S.aad
    Aug 22, 2022 at 13:33

10 Answers 10

218

&& 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 */
}
5
  • 1
    Ok, thanks for light. I hate styling forms, but it's my task, and site isn't mine. I'll apply classes to inputs.
    – Misiur
    May 9, 2010 at 9:02
  • 5
    Here's a useful chart of what Internet Explorer supports: msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#selectors
    – geofflee
    May 9, 2010 at 9:09
  • 2
    not seems to work from IE9 onwards (thanks to the chart supplied by @geofflee).
    – SharpC
    Jun 12, 2017 at 7:43
  • 2
    Are we really still concerned with supporting older versions of IE in 2018? Not even Microsoft does.
    – Anomaly
    Mar 15, 2018 at 12:18
  • 1
    Agreed. It's been 8 years since this answer was posted. I have removed the outdated guidance about the :not() selector.
    – geofflee
    Mar 16, 2018 at 0:39
67

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"])
5
  • Nah, fail too. It'll apply 1 to 2 and 2 to 1
    – Misiur
    May 9, 2010 at 8:56
  • @KennyTM: Look. Using comma will do something like this: .registration_form_right input:not([type="radio"]) will apply to everything including checkbox, and .registration_form_right input:not([type="checkbox"]) will apply to everything, including radio
    – Misiur
    May 9, 2010 at 9:07
  • @Misiur: Of course. The 2nd is for the "OR" (a.k.a. ||) case. Updated to clarify.
    – kennytm
    May 9, 2010 at 9:24
  • 1
    @KennyTM: What Misiur is trying to say is… Your "||" example is syntactically correct, but if you simplify the expression, it becomes just ".registration_form_right input" because the union of the two selectors includes all inputs.
    – geofflee
    May 9, 2010 at 9:41
  • 1
    @geo, @Mis: look, the question asked "I'll need to use || soon", so this is a way to construct a || out of the examples. Of course it becomes .registration_form_right input after simplification, but the essence is you use the , as ||. You could use input:not([type="radio"]), input:not([name="foo"]) for a nontrivial example.
    – kennytm
    May 9, 2010 at 12:07
34

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]
1
  • The above answer is what I needed thanks. e.g. <input type="input" name="is_it_still_happening" value="no"><style>input[name="is_it_still_happening"][value="no"] { border: solid 2px red}</style> Nov 8 at 21:55
5

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.

0
4

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.

3

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"])
1
  • Worked for me. Thank you soooo much. This answer saved my day: ) Apr 18, 2021 at 23:57
2

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 */
}
1
  • 3
    Sorry, :not(:not) is not a valid CSS syntax. It works with jQuery though. Oct 27, 2014 at 12:56
1

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

3
  • 3
    That wouldn't work, because the first selector would select all non- radio, (but would select the checkbox), and the second would do the reverse. The union of the two would contain both checkbox and radio.
    – Eric
    May 9, 2010 at 8:53
  • That first example won't && them together, it'll fire for inputs that aren't radios for the first selector, AND inputs that aren't checkboxes, which means all inputs :-)
    – Dan F
    May 9, 2010 at 8:54
  • You're wrong. Then, first one will apply to second, and second, to first.
    – Misiur
    May 9, 2010 at 8:55
1

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.

1

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, and :is takes on the specificity of its most specific argument. 1

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

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

OR

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.