CODEWITHSUNDEEP
htmlcss
Netizen110
Netizen110

Reputation: 1654

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

I've a code of some what like this:

<div id="foo">
 <img src="bar.png" align="right">
 <img src="cat.png" align="right"> 
</div>

Now my question is how do I target a specific image in CSS when having the above code?

Upvotes: 11

Views: 118155

Answers (6)

chadpeppers
chadpeppers

Reputation: 2057

You can add a class to the images OR

.foo img:nth-child(2) { css here }

or

.foo img:first-child { css here }
.foo img:last-child { css here }

Upvotes: 13

Harry The Mad Lurker
Harry The Mad Lurker

Reputation: 309

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.

Upvotes: 16

Marat Tanalin
Marat Tanalin

Reputation: 14123

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

Works in all browsers including IE7+.

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

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:

Upvotes: 17

Andres Riofrio
Andres Riofrio

Reputation: 10357

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 */ }

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324640

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

That should do it.

Upvotes: 1

Related Questions