CSSセレクター「（AまたはB）およびC」？

これは簡単なはずですが、検索キーワードを見つけるのに苦労しています。
私がこれを持っているとしましょう：

<div class="a c">Foo</div>
<div class="b c">Bar</div>

CSSでは、「（。aまたは.b）および.c」に一致するセレクターをどのように作成できますか？

私はこれができると知っています：

.a.c,.b.c {
  /* CSS stuff */
}

しかし、私がこの種のロジックをさまざまな論理的な組み合わせで何度も実行する必要があると仮定すると、より良い構文はありますか？

より良い構文はありますか？

いいえ。CSSのor演算子（,）はグループ化を許可していません。これは本質的にセレクターで最も優先順位の低い論理演算子であるため、を使用する必要があります.a.c,.b.c。

まだですが、それだけを行う実験的:matches()な疑似クラス関数があります。

:matches(.a .b) .c {
  /* stuff goes here */
}

詳細については、こちらとこちらをご覧ください。現在、ほとんどのブラウザ:any()は同じように機能する初期バージョンをサポートしていますが、に置き換えられ:matches()ます。これをどこでも使用する前に、もう少し待つ必要があります（きっとそうなるでしょう）

これがあれば：

<div class="a x">Foo</div>
<div class="b x">Bar</div>
<div class="c x">Baz</div>

そして、あなたは.xand（.aまたは.b）を持っている要素を選択したいだけです、あなたは書くことができます：

.x:not(.c) { ... }

ただし、3つの「サブクラス」があり、そのうちの2つを選択する場合にのみ便利です。

サブクラスを1つだけ選択する（例：）.a：.a.x

2つのサブクラスを選択する（例：.aと.b）：.x:not(.c)

3つのサブクラスをすべて選択します。 .x

いいえ。標準のCSSは、あなたが探しているようなものを提供しません。

ただし、LESSとSASSを調べることをお勧めします。

これらは、変数、ネストされたルール、その他の拡張機能などの追加機能を導入して、デフォルトのCSS構文を拡張することを目的とした2つのプロジェクトです。

これらを使用すると、はるかに構造化されたCSSコードを記述できます。どちらを使用しても、特定の使用例はほぼ確実に解決されます。

もちろん、どのブラウザーも拡張構文をサポートしていません（特に2つのプロジェクトはそれぞれ異なる構文と機能を持っているため）。しかし、ブラウザーが行うのは、LESSまたはSASSコードを標準CSSに変換する「コンパイラー」を提供することです。サイトにデプロイします。