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

Filter your data in jQuery DataTables using individual filters for each column

To keep the PHP echo statement inline with the HTML code, simply use the following syntax

Automatic scrolling feature in JavaFX

Tips for vertically aligning elements within the body while excluding the navbar from being centered

Online platform showcasing erroneous information about Bootstrap Screen Readers

Prevent the ability to capture photos using the HTML input file feature within an iOS application

Troubleshooting a Messaging Error between Background and Another Script

Including an additional row in a pre-existing table

Please indicate the decimal separator for the Number() function

HTML document without a defined delimiter is present

Implementing PHP logic for adding a class to an HTML tag

Avoid navigating through hidden tab indexes

Improving website speed and efficiency with asynchronous loading using AddThis

Is it possible to utilize the Wicket:id for generating CSS?

The back button on an Angular JS application should display a confirmation dialog when pressed

obtain the text content from HTML response in Node.js

Incorrect form of SphereGeometry detected in three.js

Are there any alternative solutions to the onunload event in Chrome, or any other ways to achieve the

Unusual ways that backgrounds and borders behave while incorporating CSS transitions for changes in height, positions, and transformations

Ways to create a vertical bottom-up tree view using d3.js