Jquery Selecting-CodePudding

I have started to learn the fundamentals of Jquery and I've wanted to ask a question about last-child selector. In code I can select the first p element in body with ":first-child" but I can't select the last p element in body with ":last-child". It works with ":last" but how can I select the last p element if I want to select it with ":last-child"?

The code is here:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP u1T9qYdvdihz0PPSiiqn/ /3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
    <p>Paragraph 1</p>
    <p class="p2" >Paragraph 2</p>
    <p id="p3">Paragraph 3</p>
    <script>
        document.title = "Selectors";
        $("p:first-child").html("First child of Body");
        $("p:last-child").html("Last child of Body");     
    </script>  
</body>
</html>

Also, I've thought that it was because of script tag's location and moved it between head and body tags like that:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP u1T9qYdvdihz0PPSiiqn/ /3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<script>
    document.title = "Selectors";
    $(document).ready(function(){
        $("p:first-child").html("First child of Body");
        $("p:last-child").html("Last child of Body");     
    })
</script>  
<body>
    <p>Paragraph 1</p>
    <p class="p2" >Paragraph 2</p>
    <p id="p3">Paragraph 3</p>
</body>
</html>

But It hasn't worked again.

CodePudding user response：

...but how can I select the last p element if I want to select it with ":last-child"?

Your code would do that, but your script placement is incorrect, and when the browser fixes it (by moving it to body), it messes up either your p:first-child or p:last-child selector. (script elements cannot be directly children of html, they have to be in head or body [as direct children or as descendant elements].)

It's important to understand what :last-child actually does: :last-child means "is the last child in the parent," not "the last of the elements matching other parts of this selector." (That's what jQuery's pseudo-selector :last does.) So p:last-child means "select an element if it's a p element and it's the last child in its parent." If there's a script tag after it (because it was relocated by the browser), then the last p in your document fails the :last-child test (it's not the last child in its parent). (And similar for :first-child.)

If you had your script inside head (so it's not in the way of the p elements being the first and last elements in body), your code would work:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>Last Child</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP u1T9qYdvdihz0PPSiiqn/ /3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
    document.title = "Selectors";
    $(document).ready(function(){
        $("p:first-child").html("First child of Body");
        $("p:last-child").html("Last child of Body");     
    })
    </script>
</head>
<body>
<p>Paragraph 1</p>
<p class="p2" >Paragraph 2</p>
<p id="p3">Paragraph 3</p>
</body>
</html>

Or if the paragraphs were in a different container so we didn't care that the script tag was in the body, as in this Stack Snippet, it would also work:

Show code snippet

<div>
    <p>Paragraph 1</p>
    <p class="p2" >Paragraph 2</p>
    <p id="p3">Paragraph 3</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP u1T9qYdvdihz0PPSiiqn/ /3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
document.title = "Selectors";
$(document).ready(function(){
    $("p:first-child").html("First child of parent");
    $("p:last-child").html("Last child of parent");     
})
</script>

I don't recommend putting undeferred scripts (like the one above including jQuery) in the head, it delays loading and rendering the HTML. I've only done it above to show that your p:first-child and p:last-child work if the paragraph elements are the first and last children of body (or of their parent).