lapso de selector css: número de primer hijo

Question

Tengo un div. Dentro de ese div tengo una mesa con 2 filas. En la segunda fila tengo una sola td. En ese td tengo primero un img, que un lapso, que otro tramo, y finalmente otro img. Me gustaría seleccionar a través de CSS el primer tramo y darle un color rojo. Aquí debajo de mi código. Lamentablemente, no está funcionando. Espero que alguien pueda ayudar. Gracias de antemano por sus respuestas. Aclamaciones. Bagazo. Por cierto, la estructura html puede parecer estúpida. Estoy de acuerdo. Simplemente simplifiqué para facilitar la lectura. Entonces no hay necesidad de comentar el código.

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

El selector de :first-childúnica selecciona ese elemento si es el primer hijo de los padres. El primer niño en este caso es una imagen, no un lapso. Está buscando el selector :first-of-type.

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

Answer 2

El CSS debe ser:

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