Добавить контент через несколько CSS: после классов

Учитывая следующий 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; }

Результат в Firefox 11:

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

Где добавлено более одного класса (.required и .note), я хотел бы добавить к элементу "*" и "+", чтобы:

required and note *+
note and required +*

Можно ли использовать чистый CSS, и если да, то как?

Изменить: здесь ссылка на jsfiddle для этого примера: http://jsfiddle.net/xpZST/

Ответ 1

Для этого вам понадобятся дополнительные правила.

Учитывая, что имеет значение упорядочение классов (обычно это не должно быть!), вам нужно будет использовать селекторы атрибутов вместо селекторов классов, и вам нужно будет создать два правила:

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

Просто добавьте эти правила после тех, которые у вас есть, и он должен работать, поскольку атрибуты и селектора классов имеют одинаковую специфику.

jsFiddle preview

Кстати, если у вас есть общие стили, вы можете сохранить свой код DRY, изолируя их в другом правиле. Например, вы можете выбрать каждый класс и дать им оба color: red:

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

jsFiddle preview