'Trouble finding selector to use for first span in a div

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>
csscss-selectors


Solution 1:[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

Solution 2:[2]

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

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Ken Redler

Related Questions