CSS Selector for an Element Having Class .A and Class .B

CSS selector for an element having class .a and class .b

That's entirely possible. If you specify two classes on an element (without any spaces), that means that it must have both for the rule to apply.

div.a {  color: blue;}div.b {  color: green;}div.a.b {  color: red;}

<div class="a">  A</div><div class="b">  B</div><div class="a b">  AB</div>

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 Selector - first element with Class in a group of same class

To select first child of the ul element, you can use :first-child pseudo-class.

To select the first element in each group, you can use adjacent sibling selector.

.A + .B will select any element with class B that immediately follows an element with class A. Similarly .B + .A will select any element with class A that immediately follows an element with class B

.A { background: red; }.B { background: blue; }
.A:first-child,.B + .A,.A + .B {  background: yellow;}

<ul class="list">  <li class="item A">AAA</li><!-- I want to select this -->  <li class="item A">AAA</li>  <li class="item A">AAA</li>  <li class="item B">BBB</li><!-- I want to select this -->  <li class="item B">BBB</li>  <li class="item B">BBB</li>  <li class="item A">AAA</li><!-- I want to select this -->  <li class="item A">AAA</li>  <li class="item A">AAA</li></ul>

how do I select a div with class A but NOT with class B?

You can use the attribute selector to match the div that has only one class:

div[class=A] {
  background: 1px solid #0f0;
}

If you want to select another div that has multiple classes, use quotes:

div[class="A C"] {
  background: 1px solid #00f;
}

Some browsers do not support the attribute selector syntax. As usual, "some browsers" is a euphemism for IE 6 and older.

See also: http://www.quirksmode.org/css/selector_attribute.html

Full example:

<!DOCTYPE html>
<html>
<head>
  <style>
    .A { font-size:22px; }
    .B { font-weight: bold; border: 1px solid blue; }
    .C { color: green; }

    div[class="A"] {
      border: 1px solid red;
    }
    div[class="A B"] {
      border: 3px solid green;
    }
  </style>
</head>
<body>
  <div class="A">"Target"</div> 
  <div class="A B">"NotMyTarget"</div> 
  <div class="A C">"NotMyTarget"</div> 
  <div class="A D">"NotMyTarget"</div> 
  <div class="A E">"NotMyTarget"</div> 
</body>
</html>

EDIT 2014-02-21: Four years later, :not is now widely available, though verbose in this specific case:

.A:not(.B):not(.C):not(.D):not(.E) {
  border: 1px solid red;
}

Unfortunately, this doesn't work in IE 7–8 as specified in the question: http://caniuse.com/#search=:not

How to select an element with 2 classes

You can chain class selectors without a space between them:

.a.b {
     color: #666;
}

Note that, if it matters to you, IE6 treats .a.b as .b, so in that browser both div.a.b and div.b will have gray text. See this answer for a comparison between proper browsers and IE6.

Select element based on multiple classes

You mean two classes? "Chain" the selectors (no spaces between them):

.class1.class2 {
    /* style here */
}

This selects all elements with class1 that also have class2.

In your case:

li.left.ui-class-selector {

}

Official documentation : CSS2 class selectors.

As akamike points out a problem with this method in Internet Explorer 6 you might want to read this: Use double classes in IE6 CSS?

when declaring css styles, what is the meaning of .classA.classB (two class names with a dot in the middle and no space)

The first example (space-separated classes) is a parent-child relationship. .classB is found inside .classA.

<div class="classA">
    <div class="classB"></div>
</div>

The second is for one element with multiple classes, like so:

<div class="classA classB"></div>

Very different situations, but both extremely useful!

Further reading here:

css select an element with 2 class

http://css-tricks.com/multiple-class-id-selectors/

HTML. Assign multiple classes with subclasses to a element

The selector for "has both classes a and b" is .a.b, so no space in between.

CSS Selector for an Element Having Class .A and Class .B