CSS Selector "(A or B) and C"

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 .a.b how do i exclude it from selecting a.b.c?

Three ways how to do it:

The first one, set styles to .a.b and them remove them (override) for .a.b.disabled.

.a.b {color: red;}
.a.b.disabled {color: grey}

https://jsfiddle.net/p84s61gp/

The second way, use the attr selector.

[class='a b'] {color: red}

https://jsfiddle.net/p84s61gp/1/

Next, you can use :not selector, but support since IE9.

.a.b:not(.disabled) {color: red}

https://jsfiddle.net/p84s61gp/2/

Opposite selector of :not(.classA, .classB, .classC) for a (X and (A or B or C)) selector

You can convert the selector classX && (classA || classB || classC) to (classX && classA) || (classX && classB) || (classX && classC)

Which is the following CSS selector:

.classX.classA, .classX.classB, .classX.classC {}

Then you can consider a small JS code to add the .classX in order to create the selector:

let dynamicClassList = ".classA, .classB, .classC";
let selector = dynamicClassList.replace(/,/gi, '.classX, ');selector=selector+'.classX';
$(selector).css('color','red');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="classA classX">some text</div><div class="classB">some text</div><div class="classX classB">some text</div><div class="classX classB classA">some text</div><div class="classB classA">some text</div><div class="classX">some text</div>

What is the difference between ' ' and a space in CSS selectors?

A > B will only select B that are direct children to A (that is, there are no other elements inbetween).

A B will select any B that are inside A, even if there are other elements between them.

Simplifying comma separated CSS selectors with common prefix/suffix

As per the comments, this is simply not possible with plain CSS right now. Your only option to shorten the selector is to use a pre-processor, like SASS (Syntactically Awesome StyleSheets). SASS allows you to write more readable, shorter code. You can compile a SASS (*.scss) file to plain CSS on your own computer, so by the time it's on the server, it's the plain old CSS you are used to, understood by all browsers. No extra requirement from your users.

For this particular case, you could use a for-each loop.

@each $domain in 'abc.com', 'def.com', 'ghi.com', 'jkl.com' {
  html:lang(qw) div[data-domain*='#{$domain}'] {
    display: none !important;
  }
}

This would result in the following CSS:

html:lang(qw) div[data-domain*='abc.com'] {
  display: none !important;
}

html:lang(qw) div[data-domain*='def.com'] {
  display: none !important;
}

html:lang(qw) div[data-domain*='ghi.com'] {
  display: none !important;
}

html:lang(qw) div[data-domain*='jkl.com'] {
  display: none !important;
}

Attribute selector where value equals either A or B?

Like this? http://jsfiddle.net/m242t/

HTML:

<form>
Username: <input type="username" name="Username" value="Username" /><br />
Password: <input type="password" name="Password" value="Password" /><br />
<input type="submit" value="Submit" />
</form>

CSS:

input[type="username"], input[type="password"] {
    color: blue;
}

Target multiple CSS classes with and/or

The old way:

.a.b, .a.c, .a.d, .a.e, .a.f

The proposed way (that few current browsers support)

.a:matches(.b, .c, .d, .e, .f)

Some browsers implement it as

.a:moz-any(.b, .c, .d, .e, .f)
.a:webkit-any(.b, .c, .d, .e, .f)

See MDN - The :any pseudo-class

CSS Selector "(A or B) and C"