CODEWITHSUNDEEP
htmlcss
Jitendra Vyas
Jitendra Vyas

Reputation: 152677

why :first-child selector not working in this case?

See example http://jsfiddle.net/qqyYU/1/

<div class="detail">

    <p><b>Entry</b><br>

First <span>40,-</span><br>

Second <span>20,-</span></p></div>

css

.detail p span:first-child {background:yellow;}

Upvotes: 0

Views: 352

Answers (2)

Ian Hunter
Ian Hunter

Reputation: 9774

The first-child of your <p> is a <b> tag, not a <span>:

"This pseudo-class matches an element only if it’s the first child element of its parent element." (http://reference.sitepoint.com/css/pseudoclass-firstchild)

EDIT You may be able to use the adjacent sibling selector if you can't change the class of the element and you are required to support IE7 (though it may not work):

http://jsfiddle.net/qqyYU/5/

Upvotes: 3

Interrobang
Interrobang

Reputation: 17434

What you want for your CSS is:

.detail p span:nth-of-type(1) {background:yellow;}

Unfortunately this has poor browser support.

Upvotes: 2

Related Questions