CODEWITHSUNDEEP
htmlcsscss-selectors
Key
Key

Reputation: 396

CSS target HTML tag, style name and class name

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"]...

Upvotes: 1

Views: 1285

Answers (3)

Naeem Shaikh
Naeem Shaikh

Reputation: 15715

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/

Upvotes: 1

BoltClock
BoltClock

Reputation: 723448

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.

Upvotes: 2

antyrat
antyrat

Reputation: 27765

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.

Upvotes: 2

Related Questions