How to target a specific <img> element of a div in CSS?

It depends entirely upon which image you want to target. Assuming it's the first (though the implementations are similar for both) image:

#foo img[src="bar.png"] { /* css */ } #foo img[src^="bar.png"] { /* css */ } #foo img:first-child { /* css */ } #foo img:nth-of-type(1) { /* css */ } 

References:

• CSS3 selectors.

I don't know why everyone is so fixed on the #foo div. You can target the img tag and not even worry about the div tag. These attribute selectors select by the "begins with".

img[src^=bar] { css } img[src^=cat] { css } 

These select by "contains".

img[src*="bar"] { css } img[src*="cat"] { css } 

Or you can select by the exact src.

img[src="bar.png"] { css } img[src="cat.png"] { css } 

If you want to target them both, then you could use the div id.

#foo img { css } 

For just one of the images, there is no need to worry about the #foo div at all.

div > img:first-child {/*the first image*/} div > img:last-child {/*the last image*/} 

That should do it.

All of the following solutions only work in recent browsers.

You can select by child position:

 #foo img:first-child { /* for the bar */ } #foo img:nth-child(2) { /* for the cat */ } 

You can select by child position, counting only images:

 #foo img:first-of-type { /* for the bar */ } #foo img:nth-of-type(2) { /* for the cat */ } 

You can select by image URL:

 #foo img[src^=bar] { /* for the bar */ } #foo img[src^=cat] { /* for the cat */ } 

#foo > IMG:first-child {/* first of two IMGs */} #foo > IMG + IMG {/* second one */} 

Works in all browsers including IE7+.