CSS targeting specific images

Question

I am looking for a way to target a specific image with CSS, if this is even possible.

I am running a CMS where the users can upload images and put them on their pages. I would like a way to target images with specific dimensions.

So the question is, can you make a css line target a image or object with certain dimensional specifications ?

I would imagine something like :

img#width:400px { float :left; }

(to make images that are 400 pixels wide have float:left)

I know i could give the image a class or an id, but it would be lost when the customer plays around in the cms.

score 9 · Accepted Answer · answered Jul 23 '11 at 10:56

9

img[width="400"]{
   float:left;
}

This will make any image that have the attribute set to 400 float left:

<img src="image.jpg" width="400" />

Note: this will only work if the width attribute is set. Will not work if the image is 400px wide but does not have a width attribute set.

answered Jul 23 '11 at 10:56

Ibu

the idea is to match both the attribute and value in html and in css img[attribute="value"] – jaxarroyo Apr 15 '19 at 02:50

score 1 · Answer 2 · answered Jul 23 '11 at 10:59

1

According to the spec this should work

img[width=400]

but I haven't tried it

answered Jul 23 '11 at 10:59

Tom B

2 Answers2