Разные стили для картинок с одинаковым классом

[Ex.clusive]

Добрый день!

Буду признателен, если поможете с решением одной проблемы. Точнее, это даже не проблема, а попытка найти более оптимизированное решение.

Есть CMS. Пользователь в текст страниц может вставлять картинки и выбирать для них разный стиль отображения\выравнивания, в частности, float: left и float: right. Стиль прописывается внутрь тега.

Вопрос:

Можно без применения jquery и др. отловить значение атрибута float в стиле и исходя из этого назначить разные стили? Или может от чего то другого можно оттолкнуться? Может как-то через псевдоклассы из CSS3. Так же немаловажен вопрос кроссбраузерности решения.

Пример.

Код у картинок внутри текста будет именно в таком виде. Классы и id прописываться не будут, ибо не хочу капаться в выводе CMSки.

Текст текст текст <img src="1.jpg" style="float: left;" title="Картинка в тексте 1" /> Текст текст текст
Текст текст текст <img src="1.jpg" style="float: right;" title="Картинка в тексте 2" /> Текст текст текст

Нужно в общем файле стилей прописать что-то, что будет вылавливать и:

На картинки с первым случаем вешать:

... { 
 margin: 5px 10px 5px 0px; 
 border: 1px; 
} 
...

На картинки со вторым случаем вешать:

... { 
 margin: 5px 0px 5px 10px; 
 border: 1px; 
} 
...

[ShumNo]

не хотите немного подправить js скрипт, чтобы он

вместо style="float: left;"

Ставил class="left"

А если потом захотите не 10 пикселей на 15 или убрать бордер? В общем по мне так 4-х колесный велосипед хотите изобрести. Не очень хотите использовать jquery я так понимаю вы подразумеваете в целом js и хотите чем-то отлавливать... остается только серверным языком

[Ex.clusive]

А в чем проблема потом поменять 10 на 15? вторая часть кода вынесена в style.css. Изменили его - и всё норм. Я ж про что и говорю, что надо как-то адресоваться к этим двум видам картинок, чтобы разные стили им прописать в css.

[wwt]

Как вариант использовать селектор аттрибутов.

http://jsfiddle.net/d6R26/

есть нюанс в сравнении должно быть полное соответствие.

К примеру:

CSS

img[style*="float: left"] {/*что-то*/}

<img src="1.jpg" style="float: left;"><!--стиль сработает-->
<img src="2.jpg" style="float:left;"><!--стиль не сработает ибо нет пробела после двоеточия-->

[Ex.clusive]

2wwt

Небольшой пример щас накидал - такой вариант отработал хорошо. Вечером в реальных условиях попробую проверить, чтобы он не отлавливал на странице ничего лишнего.

Спасибо!

Edited November 16, 2012 by Ex.clusive