Question

How can I target styling to the 1st <span> (Foo) without affecting the 2nd <span> (Bar) preferably without using a class? IE6 support is not needed. I tried using first-child but that only works without the image being there.

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

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

Answer 1

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

.adcodeblock span:first-of-type

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

.adcodeblock br + span