Troubleshooting selector for first range in div

Question

How can I adjust the style to the 1st span (Foo) without affecting the 2nd span (Bar), preferably without using a class? IE6 support is not required. I tried using the first child, but only works without an image.

I could live with degradation if I used ".adcodeblock span: nth-child (3)", but I thought that I would check more experienced people first.

<div class="adcodeblock"> img src="/images/aUHFgK.jpg" alt="" border="0"> <br> <span>Foo</span> <span>Bar</span> </div> 

Answer 1

You can use the pseudo-class :first-of-type :

 .adcodeblock span:first-of-type 

See for browser support table. For older browsers, I would use something like this:

 .adcodeblock br + span 

Answer 2

If you can live without IE8 and below, you can try

 .adcodeblock span:nth-of-type(1)