Css3 Combining Selectors with or Instead of And

CSS3 combining selectors with OR instead of AND

You'll need to split them up using a comma:

body[class*="page-node-add-"], body[class~="page-node-edit"] {background:red;}

The problem with using a comma:

... is that you can't do it any other way than with a comma. Perhaps it could have been remedied with Selectors 3, but unfortunately the spec says otherwise. That is only going to be remedied by Selectors 4, either because it wasn't proposed until recently, or it was proposed but didn't make the cut for level 3.

In level 4 of Selectors you will be able to do something like this:

body:matches([class*="page-node-add-"], [class~="page-node-edit"]) form.node-form > .field-type-field-collection > table > thead tr th
{...}

Currently, this is being implemented under its originally-proposed name, :any(), with the prefixes :-moz-any() and :-webkit-any(). But using :any() in public-facing CSS is pointless given that

1. only Gecko and WebKit support it; and

2. you have to duplicate your rulesets because of the way prefixed selectors are handled, which not only defeats the intended purpose of the :matches() selector, but makes things even worse:

   body:-moz-any([class*="page-node-add-"], [class~="page-node-edit"]) form.node-form > .field-type-field-collection > table > thead tr th
   {...}
   body:-webkit-any([class*="page-node-add-"], [class~="page-node-edit"]) form.node-form > .field-type-field-collection > table > thead tr th
   {...}
   

In other words, until implementations update themselves to the standardized :matches(), there is no other viable solution (save from using a preprocessor to generate the repeated selectors for you).

CSS and and or

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

CSS Selector (A or B) and C ?

is there a better syntax?

No. CSS' or operator (,) does not permit groupings. It's essentially the lowest-precedence logical operator in selectors, so you must use .a.c,.b.c.

How to combine multiple selectors for the same rule

To group CSS selectors in a style sheet, you use commas to separate multiple grouped selectors in the style. In this example, the style affects two classes input#input_9_2 and input#input_9_3.

input#input_9_2,
input#input_9_3
{
  max-width: 500px;
}

The comma means "and", so this selector applies to all input#input_9_2 elements and input#input_9_3 elements. If the comma were missing, the selector would instead apply to all input#input_9_3 elements that are a child of an input#input_9_2. That is a different kind of selector, so the comma is important.

Any form of the selector can be grouped with any other selector.

CSS and selector - Can I select elements that have multiple classes?

You use both (without space between them)

.checked.featured{
   // ...
}

Reference: http://www.w3.org/TR/selectors/#class-html

Example

div{margin:1em;padding:1em;}
.checked{color:green;}.featured{border:1px solid #ddd;}
.checked.featured{       font-weight:bold;    }

<div class="checked">element with checked class</div><div class="featured">element with featured class</div><div class="featured checked">element with both checked and featured classes</div>