CSS "and" and "or"

Question

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.

*"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.") — T.J. Crowder, May 09 '10 at 09:01
Well, i couldn't find good translation to phrasal verb from my language ;) — Misiur, May 09 '10 at 09:06
I think @T.J. Crowder probably understood that. But it *was* funny...particularly the irony of his misspelling 'divine' =D — David Thomas, May 09 '10 at 10:32
[Great ngram](https://books.google.com/ngrams/graph?year_start=1800&year_end=2008&corpus=15&smoothing=7&case_insensitive=on&content=anathematise&direct_url=t1%3B%2Canathematise%3B%2Cc0), though. ;^) — ruffin, Jan 11 '16 at 19:52
Possible duplicate https://stackoverflow.com/questions/12340737/specify-multiple-attribute-selectors-in-css — S.aad, Aug 22 '22 at 13:33

geofflee · Accepted Answer · 2018-03-16T00:38:08.197

214

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

edited Mar 16 '18 at 00:38

answered May 09 '10 at 08:59

geofflee

3,513
2
23
23

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 09 '10 at 09:02
5

Here's a useful chart of what Internet Explorer supports: http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#selectors – geofflee May 09 '10 at 09:09
2

`not` seems to work from IE9 onwards (thanks to the chart supplied by @geofflee). – SharpC Jun 12 '17 at 07:43
2

Are we really still concerned with supporting older versions of IE in 2018? Not even Microsoft does. – Anomaly Mar 15 '18 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 '18 at 00:39

kennytm · Answer 2 · 2010-05-09T09:25:13.773

63

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

edited May 09 '10 at 09:25

answered May 09 '10 at 08:48

kennytm

510,854
105
1,084
1,005

Nah, fail too. It'll apply 1 to 2 and 2 to 1 – Misiur May 09 '10 at 08: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 09 '10 at 09:07
@Misiur: Of course. The 2nd is for the "OR" (a.k.a. `||`) case. Updated to clarify. – kennytm May 09 '10 at 09: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 09 '10 at 09: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 09 '10 at 12:07

score 33 · Answer 3 · edited Dec 20 '16 at 22:33

33

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]

edited Dec 20 '16 at 22:33

mabdrabo

1,050
21
35

answered Dec 20 '16 at 21:50

waao

339
3
2

score 5 · Answer 4 · answered May 09 '10 at 08:52

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.

score 3 · Answer 5 · answered Feb 19 '14 at 19:09

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

answered Feb 19 '14 at 19:09

Aurish

49
1

Worked for me. Thank you soooo much. This answer saved my day: ) – Sandeep Amarnath Apr 18 '21 at 23:57

score 3 · Answer 6 · answered May 31 '22 at 12:33

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.

Serge Profafilecebook · Answer 7 · 2014-10-27T11:52:52.997

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

edited Oct 27 '14 at 11:52

answered Oct 27 '14 at 11:46

Serge Profafilecebook

1,165
1
14
32

3

Sorry, :not(:not) is not a valid CSS syntax. It works with jQuery though. – Serge Profafilecebook Oct 27 '14 at 12:56

score 1 · Answer 8 · edited May 09 '10 at 09:28

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

edited May 09 '10 at 09:28

Justin Johnson

30,978
7
65
89

answered May 09 '10 at 08:46

Jaroslav Záruba

4,694
5
39
58

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 09 '10 at 08: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 09 '10 at 08:54
You're wrong. Then, first one will apply to second, and second, to first. – Misiur May 09 '10 at 08:55

score 1 · Answer 9 · answered Feb 20 '20 at 09:11

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.

CSS "and" and "or"

9 Answers9

Linked

Related