ansaurus

Question

CSS "and" and "or"

Answer 1

A:

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

Jaroslav Záruba 2010-05-09 08:46:20

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 2010-05-09 08:53:10

Dan F 2010-05-09 08:54:34

You're wrong. Then, first one will apply to second, and second, to first.

Misiur 2010-05-09 08:55:23

you're right :)

Jaroslav Záruba 2010-05-09 09:36:24

Answer 2

+5 A:

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

KennyTM 2010-05-09 08:48:04

Nah, fail too. It'll apply 1 to 2 and 2 to 1

Misiur 2010-05-09 08:56:37

@Misiur: I don't understand.

KennyTM 2010-05-09 09:05:10

@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 2010-05-09 09:07:57

@Misiur: Of course. The 2nd is for the "OR" (a.k.a. `||`) case. Updated to clarify.

KennyTM 2010-05-09 09:24:50

@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 2010-05-09 09:41:43

@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 2010-05-09 12:07:27

Answer 3

+3 A:

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.

Max Shawabkeh 2010-05-09 08:52:31

You're quite right. Hovewer, best is adding class to input.

Misiur 2010-05-09 09:00:57

Answer 4

+6 A:

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

As a side note, I would recommend against using the "not" selector because it is not supported by Internet Explorer. Based on one survey, 60% of people use some version of Internet Explorer, so your website will not work for a lot of people.

-Geoffrey Lee

geofflee 2010-05-09 08:59:38

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 2010-05-09 09:02:38

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

geofflee 2010-05-09 09:09:37

ansaurus

tags:

views:

answers:

CSS "and" and "or"

related questions