Css "And" and "Or"

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.

CSS: AND and + operator?

There's a few ways to do this, none pretty.

/* #1 */
h1 + *:not(h2),
h2 + *:not(h3) { /* etc */
    padding-top: 20px;
}

/* #2 */
h1, h2 {
    padding-bottom: 20px;
}
h1 + h2 {
    margin-top: -20px;
}

(and variations of these.)

The problem is there is currently no way to select "backward," i.e. apply styles to an element based on what appears after it. There is only the ability to select "forward," using the + or ~ sibling combinators. So you can't override the style on an <h1> based on the existence of a subsequent <h2>.

In the CSS4 selectors draft, there is a method of specifying the subject of the selector, using the $ sign. In that case the code would look like:

h1, h2 {
    padding-bottom: 20px;
}
$h1 + h2 {
    padding-bottom: 0;
}

/* or even */
h1:not($h1 + h2), h2 {
    padding-bottom: 20px;
}

This isn't currently available in any browsers, however.

AND operator in CSS selectors

Generally speaking, you aren't restricted to only one selector of a kind (with the notable exception of element selectors, for obvious reasons):

.a.b {
    color: green;
}

<span class="a">Only A</span>
<span class="b">Only B</span>
<span class="a b">Both A and B</span>

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

only Gecko and WebKit support it; and

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 Selectors - difference between and when to use , + or

In CSS these are called Combinators and means three different things:

div > .class: is called Child selector and will select all elements that are direct children of a div and have the class .class.
div .class: is called Descendant selectors and will select all elements inside a div and having the class .class.
div + .class: is called Adjacent sibling selector and will match any element that immediately follows a div and have the class .class.

Example:

In the following example:

<div>
  <p class="test">
    <a href="#" class="test">
      Testing link</a>
    <img class="test"/>
  </p>
  <span class="test">A span</span>
</div>
<h4 class="test">A title</h4>

div > .test will match only <p> and <span> elements.
div .test will match <p>, <a>, <img> and <span> elements.
div + .test will match only <h4> element because it follows the <div> immediately.

Demo:

div .test {  background: yellow;}
div>.test {  background: red;}
div+.test {  background: green;}

<div>  <p class="test">    Pragraph    <a href="#" class="test">      link</a>    <img class="test" width="50px" height="50px" />  </p>  <span class="test">Span</span></div><h4 class="test">Title</h4>

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>

Using OR in CSS selectors

As others said, CSS doesn't support that kind of grouping.

If you have control over your markup, why not just add a common class to each group of type classes then select that common class?

Example:

<div class="typeA type1">
    <span id="logo">Site Title</span>
</div>

<div class="typeD type2">
    <span id="logo">Site Title</span>
</div>

.type1 #logo { color: #ffffff; }
.type2 #logo { color: #000000; }

A CSS combinator for representing an AND condition

Sure,

Put both attributes after each other (without a space)

a[href^="http://www."][target="_blank"]

Also note that I fixed the typo, you missed the underscore before blank.

p {  font-weight: bold; }
a[href^="http://www."][target="_blank"]::after {content : "->";}

<p>Valid ones that I'd like the rule to match</p><a href = "http://www.google.com"   target = "_blank">Google</a><br /><a href = "http://www.yahoo.com"   target = "_blank">Yahoo!</a><br />
<p>Invalid ones that I'd like the rule NOT to match</p><a href = "http://www.microsoft.com">Microsoft</a><br /><a target = "_blank">Anchor without href</a><br /><a href = "NamedAnchor"   target = "_blank">Amazon within this document</a><br /><a href = "https://www.facebook.com"   target = "_blank">Facebook</a><br /><a href = "http://apple.com"   target = "_blank">Apple</a>
<p>Observe how even the anchor <i>Microsoft</i> gets selected by the combinator because the anchor starts with the right <code>href</code> even though it does not have the <code>target</code> attribute</p>