Неисправность выбора селектора для первого пролета в div

Question

Как я могу нацелить стиль на 1-й диапазон (Foo), не затрагивая 2-й диапазон (Bar), предпочтительно без использования класса? Поддержка IE6 не нужна. Я пытался использовать first-child, но это работает только без изображения.

Я мог бы жить с деградацией, если бы использовал ".adcodeblock span: nth-child (3)", но я решил сначала обратиться к более опытным людям.

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

Answer 1

Вы можете использовать псевдокласс :first-of-type:

.adcodeblock span:first-of-type

См. это для таблицы поддержки браузера. Для старых браузеров я бы использовал что-то вроде этого:

.adcodeblock br + span

Answer 2

Если вы можете жить без IE8 и ниже, вы можете попробовать

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