web-dev-qa-db-ja.com

CSS Selector "（A or B）and C"？

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

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

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

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

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

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

htmlcsscss-selectors
145
Josh

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

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

115
Matt Ball

まだではありませんが、それを行う実験的な:matches()セレクターがあります。

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

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

19
Metalcoder

これがある場合：

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

そして、.xおよび（.aまたは.b）を持つ要素のみを選択したい場合は、次のように記述できます。

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

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

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

2つのサブクラスの選択（たとえば、.aと.b）：.x:not(.c)

3つのサブクラスすべてを選択する：.x

11
Šime Vidas

いいえ。標準CSSは、探しているものを提供しません。

ただし、 LESS および SASS を調べてください。

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

それらにより、はるかに構造化されたCSSコードを書くことができ、どちらも特定のユースケースをほぼ確実に解決します。

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

4
Spudley