how can I select the first-child, when It is in a div

Question

this is my code and I am going to select first child that is <span>

<div class="textTextmenu">
      <img src="pic/postimage.png"/>
        <span>
            I need to select this span
        </span>
        <span>
            span 2
       </span>
   </div>

I want to do this with first-child, but I don't know how to use first-child

Like this:

.textTextmenu span:first-child{
 /*
    writing code here
 */
  color:red;
}

Answer 1

Here is all to make you understand

1)    .textTextmenu span:first-of-type { color:red } 
2)    .textTextmenu :nth-child(1){border:1px solid red;}
3)    .textTextmenu span:nth-child(2){color:red;}

DEMO 1

DEMO 2

DEMO 3

Answer 2

In your example, .textTextmenu span:first-child will not match anything. The first-child of .textTextmenu is an img.

You might actually want to look into first-of-type, or nth-child, e.g.

.textTextmenu span:first-of-type {}

or

.textTextmenu :nth-child(2) {}

Other approaches that would work in this particular example are + or :last-child, like so:

.textTextmenu span {
    /* Style the first span */
}
.textTextmenu span + span {
    /* Style the next span */
}

or

.textTextmenu span {
    /* Style the first span */
}
.textTextmenu span:last-child {
    /* Style the next span */
}

Answer 3

I'm kind of confused as to what you want but...

.textTextmenu img:first-child{
  border:2px solid red;
 /*How to select First child? / this way is wronge and image is not selected*/
}

right?

Answer 4

.textTextmenu img:first-child{
  border:2px solid red;
}

this will select first img tag inside the div

Answer 5

any reason why you cant use first-of-type?

.textTextmenu span:first-of-type {
  ...styles go here... 

}

NOTE: as with many CSS pseudo-selectors, first-of-type is just an alias for nth-of-type(1) just as first-child is an alias for nth-child(1)

Answer 6

Is this be good? It selects each span after image in textTextmenu

.textTextmenu    img + span {} 

Answer 7

To select the image, instead of:

.textTextmenu span:first-child{}

do

.textTextmenu img:first-child{}

Here is a fiddle of it in action: http://jsfiddle.net/763K9/

Answer 8

.textTextmenu img + span{
  border:2px solid red;
 /*How to select First child? / this way is wronge and image is not selected*/
}

See the demo http://jsfiddle.net/nUwDb/