web-dev-qa-db-ja.com

CSS：クラスの組み合わせに適用されるスタイル？

これが可能かどうかはわかりませんが、適用されているクラスの組み合わせに基づいて要素のスタイルを設定する場合に、CSSで使用する構文はありますか？

JQueryまたは何かで要素をチェックし、それが持つクラスに基づいてスタイルを変更できることを理解していますが、これを行う純粋なCSS方法はありますか？

たとえば、ボールドとグリーンのクラスがある場合：

.bold_green { color:green; font-weight:bold; }

そして、ボールドとブルーのクラス：

.bold_blue { color:blue; font-weight:bold. }

ここで、jQueryを使用してクラスを動的に追加および削除し、両方のクラスを持つ要素にイタリックピンクにしたいとします。

何かのようなもの：

.bold_green AND .bold_blue { color:pink; font-style:italic; }

または、クラスを持つ要素にスタイルを設定し、別のクラスを持つ別の要素の子孫である場合はどうなりますか？

何かのようなもの：

.bold_green HAS_CHILD .bold_blue { color:black; background-color:yellow; }

ありがとう！

編集

すべての回答をありがとう。これらは私が思っていたものとほぼ同じです（クラスを通常のセレクターとして扱うだけです）が、私にとってはうまく機能していないようです。私は自分のコードをチェックして、何とかオーバーライドされていないことを確認する必要があります...

csscss-selectors
33
Eli
$('.bold_green.bold_blue').addClass('something-else');

またはCSSで：

.bold_green.bold_blue { color: pink; }

セレクターの間にスペースがないことに注意してください。

68
Paul Alexander

特別なことは必要ありません

.bold_green.bold_blue { color:pink; font-style:italic; }
6
Esteban Küber

Paul および Voyager は、複数のクラスの場合に適しています。

「HAS CHILD」の場合、次を使用します。

.bold_green .bold_blue { ... } /* note the ' ' (called the descendant selector) */

どれでもbold_blue内の要素bold_green要素。

または、直接の子が必要な場合：

.bold_green > .bold_blue { ... } /* this child selector does not work in IE6 */

どちらのスタイルのみになりますbold_blue直接の親を持つ要素bold_green。

3
Joel

Visual Studio 2013では、CSS設定は次のように「カンマ」によって複数のクラスに適用されます。

.bold_green, .bold_blue { color:pink; font-style:italic; }

1
Mehdi