css selector span:first-child issue

Question

I have a div. Inside that div I have a table with 2 rows. In the second row I have a single td. In that td I have first a img, than a span, than another span, and finally another img. I would like to select through css the first span and give it a red color. Here below my code. Unfortunately it is not working. Hope someone can help. Thank you in advance for your replies. Cheers. Marc. By the way, the html structure might look stupid. I agree. I just simplified to ease the lecture. So no need to comment the code.

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

The :first-child selector only selects that element if it is the first child of the parent. The first child in this case is an image, not a span. You are looking for the :first-of-type selector.

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

Answer 2

The CSS should be:

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