Добавить контент через несколько 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
