диапазон выбора css: проблема первого ребенка

Question

У меня есть div.Внутри этого div у меня есть таблица с 2 рядами.Во втором ряду у меня один тд.В этом тд у меня сначала img, чем промежуток, чем другой промежуток, и, наконец, еще один img.Я хотел бы выбрать через CSS первый промежуток и дать ему красный цвет.Здесь под моим кодом.К сожалению, это не работает.Надеюсь, кто-то может помочь.Заранее благодарю за ваши ответы.Приветствия.Марк.Кстати, структура HTML может выглядеть глупо.Согласен.Я просто упростил лекцию.Поэтому не нужно комментировать код.

http://cssdesk.com/sVKXg

<div id="myDiv">
  <table cellspacing="0">

        <tr>
            <td>
                <span>Some text</span>
            </td>
        </tr>

        <tr>
            <td>
                <img src="img/quotes-open.png" alt="" />
                <span>span1</span>
                <span>span2</span>
                <img src="img/quotes-close.png" alt="" />
            </td>
        </tr>

  </table>   
</div>

#myDiv tr:nth-child(2) span:first-child{
  color:red;}

Answer 1

Селектор :first-child only выбирает этот элемент, если он является первым дочерним элементом родителя.Первый ребенок в этом случае - это изображение, а не промежуток.Вы ищете селектор :first-of-type.

#myDiv tr:nth-child(2) span:first-of-type { color:red }

Answer 2

CSS должен быть:

#myDiv tr:nth-child(2) span:nth-child(2){
  color:red;
}