CODEWITHSUNDEEP
jqueryhtmlcss
user1469270
user1469270

Reputation:

Simple first-child not working as expected

I thought I understood this, but apparently not.

http://jsfiddle.net/tmyie/w6nMe/2/

$('p:first-child').css({color:'red'});

Is not changing the colour of any text.

<div class="post text"> <a href="#">this is a url</a>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex optio velit culpa nisi nemo ab voluptatem vitae voluptate molestiae recusandae? Ipsa dolorum ut dignissimos ipsam doloribus itaque reprehenderit nostrum a.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex optio velit culpa nisi nemo ab voluptatem vitae voluptate molestiae recusandae? Ipsa dolorum ut dignissimos ipsam doloribus itaque reprehenderit nostrum a.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex optio velit culpa nisi nemo ab voluptatem vitae voluptate molestiae recusandae? Ipsa dolorum ut dignissimos ipsam doloribus itaque reprehenderit nostrum a.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex optio velit culpa nisi nemo ab voluptatem vitae voluptate molestiae recusandae? Ipsa dolorum ut dignissimos ipsam doloribus itaque reprehenderit nostrum a.</p>
</div>
<div class="post text"> <a href="#">this is a url</a>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex optio velit culpa nisi nemo ab voluptatem vitae voluptate molestiae recusandae? Ipsa dolorum ut dignissimos ipsam doloribus itaque reprehenderit nostrum a.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex optio velit culpa nisi nemo ab voluptatem vitae voluptate molestiae recusandae? Ipsa dolorum ut dignissimos ipsam doloribus itaque reprehenderit nostrum a.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex optio velit culpa nisi nemo ab voluptatem vitae voluptate molestiae recusandae? Ipsa dolorum ut dignissimos ipsam doloribus itaque reprehenderit nostrum a.</p>
</div>

Upvotes: 1

Views: 69

Answers (7)

Wilfredo P
Wilfredo P

Reputation: 4076

I think you are looking for:

$('p:first').css({color:'red'});

UPDATE:

selecting first <p> on any <div>

$('div p:first-of-type').css({color:'red'});

Live Demo

Upvotes: 2

Green Wizard
Green Wizard

Reputation: 3667

This is a kind of hack. you may include the following in your jquery.

$('p:nth-child(2)').css({color:'red'});

Upvotes: 0

Manoj
Manoj

Reputation: 1890

In css :first-child selector is used to select the specified selector, only if it is the first child of its parent.

fiddle:

CSS:

p:first-child {
    background-color: orange;
}

Upvotes: 0

Jesus Bejarano
Jesus Bejarano

Reputation: 1146

I think you are trying to select the first p tag child of every parent post, here is my solution:

$('div.post p:first-child').css({color:'red'})

Upvotes: 0

Priya jain
Priya jain

Reputation: 703

try This Code:

$(function() {
  $("p:first").addClass("first");
});

css :p.first { color: red; }

Upvotes: 0

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try :first or :eq(0) like,

$('p:first').css({color:'red'});

Demo and Eq demo

Upvotes: 0

codingrose
codingrose

Reputation: 15699

It should be 

$('p:first').css({color:'red'});

Change 

p:first-child {
    background-color: orange;
}

to

p:first-of-type {
    background-color: orange;
}

Updated fiddle here.

Upvotes: 2

Related Questions