CSS :first-child rule

Question

HTML is as follows

<div class="box">
<a href="images/about_1.jpg">
    <img src="images/about_1_thumb.jpg" class="float-left">
</a>

<a href="images/about_2.jpg">
    <img src="images/about_2_thumb.jpg" class="float-left">
</a>
</div>

CSS is as follows

div.box img.float-left{
  float:left;
  display:inline;
}

div.box a img.float-left:first-child{
  margin-right: 5px;
}

Trying to get the margin-right rule to appear only on the image inside the first anchor tag. Anybody see what I'm doing incorrectly?

Answer 1

Your css call to first child should be on the highest shared tag (in this case the a tag) and not in the nested element of the highest shared.

Answer 2

Yes, Just add the selector to the a tag (Since you want the style on the first child of the parent)

div.box img.float-left{
  float:left;
  display:inline;
}

div.box a:first-child img.float-left{
  margin-right: 5px;
}

Here is a DEMO