Unexpected behavior with first-child selector in a simple CSS code

Question

Unexpected behavior with first-child selector in a simple CSS code

It seemed so clear to me, but it turns out I was mistaken.

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

The color of all text is not being altered.

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

jquery html css

Answer 1

Answer №1

It needs to be

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

Replace

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

with

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

Access the updated fiddle here.

Answer 2

It needs to be

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

Replace

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

with

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

Access the updated fiddle here.

Answer 3

Answer №2

It seems like you're searching for this:

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

UPDATE:

Choosing the first <p> within any <div>

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

See Live Demo

Answer 4

It seems like you're searching for this:

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

UPDATE:

Choosing the first <p> within any <div>

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

See Live Demo

Answer 5

Answer №3

Consider using the jQuery :first or :eq(0) selectors, for example:

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

For a visual demonstration, check out this Demo and this Eq demo

Answer 6

Consider using the jQuery :first or :eq(0) selectors, for example:

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

For a visual demonstration, check out this Demo and this Eq demo

Answer 7

Answer №4

Check out this code snippet:

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

CSS : p.first { color: red; }

Answer 8

Check out this code snippet:

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

CSS : p.first { color: red; }

Answer 9

Answer №5

My approach to this issue involves targeting the initial p tag offspring of each main post. Here is the code snippet I recommend:

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

Answer 10

My approach to this issue involves targeting the initial p tag offspring of each main post. Here is the code snippet I recommend:

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

Answer 11

Answer №6

The css :first-child selector is utilized to target a specific selector only if it appears as the first child of its parent element.

Check out this fiddle for an example:

Here's the CSS code:

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

Answer 12

The css :first-child selector is utilized to target a specific selector only if it appears as the first child of its parent element.

Check out this fiddle for an example:

Here's the CSS code:

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

Answer 13

Answer №7

If you're looking for a clever solution, you can try adding this snippet of code to your jQuery script:

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

Answer 14

If you're looking for a clever solution, you can try adding this snippet of code to your jQuery script:

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

Unexpected behavior with first-child selector in a simple CSS code

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Arrange divs in vertical columns

Can you provide guidance on how to zoom in on the Jquery Portlet when clicking the "zoom-in" icon?

What steps can I take to make my animation work in the opposite direction as well?

Using JavaScript to modify a section of an anchor link attribute

Locate all elements containing a specific text string

When the flex-grow property is set to 1, the height of the div extends beyond the space that

When a table row is selected, set the OnClick attribute of an input to the value of the TD cell in that row based on

Ways to select the initial 10 rows, final 3 rows, and middle 2 rows using Javascript

Utilizing Object Arrays in Chart.js for Optimal Performance

Adjust the error message shown for a specific field in a jQuery form validator

Refreshing CKFinder Form Field with jQuery

position text to the right side of a slider gallery created with JavaScript

How can I create a box-shaped outline using Three.js?

Ways to display a div when a drop-down box is clicked

Error: The function exec in matchExpr[type] is not defined

Ensuring Form Integrity through jQuery Validation

Cookie Setting - Utilizing a jQuery Modal Box for Confirmation Messages

How does the functionality of $.ajax differ from that of $.get?

Can you explain how to utilize theme values in CSS within Mui?

I'm looking for a method to retrieve the value of an option tag and then pass it to a helper within handlebars. Can someone