CODEWITHSUNDEEP
csscss-selectors
Mohammad Kermani
Mohammad Kermani

Reputation: 5396

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

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;
}

Upvotes: 0

Views: 97

Answers (8)

4dgaurav
4dgaurav

Reputation: 11496

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

Upvotes: 2

Amit Garg
Amit Garg

Reputation: 3907

.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/

Upvotes: 1

FDI
FDI

Reputation: 801

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

this will select first img tag inside the div

Upvotes: 2

alex
alex

Reputation: 547

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?

Upvotes: 2

Dryden Long
Dryden Long

Reputation: 10182

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/

Upvotes: 1

AlexPrinceton
AlexPrinceton

Reputation: 1203

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

.textTextmenu    img + span {}

Upvotes: 1

Olly Hodgson
Olly Hodgson

Reputation: 15775

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 */
}

Upvotes: 3

celeriko
celeriko

Reputation: 1694

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)

Upvotes: 1

Related Questions