css - 複数のCSSを介してコンテンツを追加する：クラスの後

Question

次のHTMLが与えられます：

<div class="required">required only</div>
<div class="note">note only</div>
<div class="required note">required and note</div>
<div class="note required">note and required</div>

そしてCSS：

.required:after { content: " *"; color: red; }
.note:after { content: " +"; color: red; }

Firefox11での結果は次のとおりです。

required only *
note only +
required and note +
note and required +

複数のクラスが提供されている場合（.requiredと.note）、次のように要素に「*」と「+」の両方を追加したいと思います。

required and note *+
note and required +*

これは純粋なCSSを使用して可能ですか？もしそうなら、どのように？

編集：この例のjsfiddleへのリンクは次のとおりです：http：//jsfiddle.net/xpZST/

Answer 1

これを機能させるには、追加のルールが必要です。

クラスの順序が重要であることを考えると（通常はそうではないはずです！）、クラスセレクターの代わりに属性セレクターを使用する必要があり、 2つのルールを作成する必要があります。

[class="required note"]:after { content: " *+"; color: red; }
[class="note required"]:after { content: " +*"; color: red; }

属性セレクターとクラスセレクターは同じように固有であるため、これらのルールを使用しているルールの後に追加するだけで機能するはずです。

jsFiddleプレビュー

ちなみに、共通のスタイルがある場合は、別のルールでそれらを分離することにより、コードをDRYに保つことができます。たとえば、各クラスを選択して、両方を与えることができますcolor: red。

.required:after, .note:after { color: red; }

jsFiddleプレビュー