want to style image tag for one set of images but not others

on my blog here;

I am trying to apply a margin of 5px to the big house image that you see in the first blog entry, Luxury Mansions. My code looks like this;

a img, img a {
	margin: 5px;
	}

Code (markup):

Simple enough, right?

But then I notice that that will affect the image in the upper right hand corner of my banner. In fact, it affects my other images too such as the orange banner in the sidebar. The css for that img looks like this;

 a img.showcaseimage, img.showcaseimage a {
border:5px solid #002F2F;
float:left;
margin-right:5px;}

Code (markup):

What should I be doing so that my other images don't receive that extra margin of 5 pixels?

 

Go into the blog post and edit it, and give it (the anchor for the image) an id and apply the margin to the ID? you can specify each of your blog entry images, but that would obviously not affect only the first blog entry.

<a id="luxury-mansion-pic"><img /></a>

a#luxury-mansion-pic img { margin:5px; }

 

yes, but isn't that a very inefficient way of doing things- styling every individual pic in my blog post? I should note that this site is going to be very image-heavy and filled with lots of photos in the blog post.

isn't there something I could do to the top right hand photo instead?

 

You said you wanted to style that particular image for that particular post. You did not mention anything about other images in blog posts, therefore the solution I recommended fits. If you want to apply the same style, then just assign a class to the anchor which contains the <img /> and be specific in your selector, and style the image.

 

As soulscritch said, just create a class and apply it to the image(s)