I have some markup below and what i want to do using css is target the 3 following points.
I have tried the following code which fails
img[style*="right"][class="media-element"] {margin-left:10px;}
Using the following to select the style works
img[style*="right"]...
Try this:
img.media-element[style*="right"] {margin-left:10px;}
No need to use attribute equal selector if you know your exact class name. Use . ( dot ) notation instead.
Your attribute selector [class="media-element"] looks for an exact match of the entire value of the class attribute. It will match the element only if the attribute as it appears in the markup is exactly class="media-element", with no other class names. Otherwise, it will fail.
If you're selecting by class name, you really should be using a class selector:
img[style*="right"].media-element {margin-left:10px;}
You should only use an attribute selector with the class attribute if you have a very good reason to do so.
If you have many classes inside class='', then [class="media-element"] is not going to match any element,
what you can do alternately is,
img[style*="right"][class*="media-element"] {margin-left:10px;}
see this fiddle: http://jsfiddle.net/m4t5qmw3/1/
