Css selector range: problem with first child

Question

I have a div. Inside this div, I have a table with two rows. In the second row I have one td. In this td, I first have img than span than another range, and finally another img. I would like to select the first span through css and give it a red color. Here is below my code. Unfortunately, it does not work. Hope someone can help. Thank you in advance for your answers. Greetings. Mark. By the way, the html structure may look silly. I agree. I just simplified this lecture. Therefore, you do not need to comment on 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 selects this element only if it is the first child of the parent. The first child in this case is the image, not the gap. You are looking for a selector :first-of-type .

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

Answer 2

CSS should be:

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