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

Question

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?

Answer 1

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.