Open In App

jQuery :last Selector

Last Updated : 17 Nov, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

The jQuery :last Selector is used to select the last element of the specified type.

Syntax: 

$(":last")

Example 1: In this example, we will select the last <p> element by using jQuery :last Selector.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
     
    <script>
        $(document).ready(function () {
            $("p:last").css(
                "background-color", "green");
        });
    </script>
</head>
 
<body>
    <h1>
        <center>
            Geeks
        </center>
    </h1>
    <p>Geeks for Geeks</p>
    <p>jQuery</p>
    <p>Last Selector</p>
</body>
 
</html>


Output: 

Example 2: In this example, we will change the background color of the last <p> element.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
 
    <script>
        $(document).ready(function () {
            $("p:last").css(
                "background-color", "green");
        });
    </script>
</head>
 
<body>
    <h1>
        <center>
            Geeks
        </center>
    </h1>
    <div style="border:1px solid;">
        <p>Geeks for Geeks</p>
        <p>jQuery</p>
    </div>
    <br>
 
    <div style="border:1px solid;">
        <p>Geeks for Geeks</p>
        <p>jQuery</p>
        <p>Last Selector</p>
    </div>
    <div>jQuery:Last Selector</div>
</body>
 
</html>


Output: 

Note: Above code will select only the last <p> element of second div. To select the last <p> element of first div use :last-child selector.



Previous Article
Next Article

Similar Reads

Last-child and last-of-type selector in SASS
SASS is also called Syntactically Awesome Stylesheet. It is a programming language that is interpreted into CSS. The Last Child selector is a selector that allows the user to target the last element inside the containing element. This selector is also known as a Structural Pseudo class which means it is used for styling content on the basis of pare
2 min read
jQuery :last-of-type Selector
The jQuery :last-of-type Selector is used to select all elements which are the last child of their parent. Syntax: $(":last-of-type") Below are examples that illustrate the :last-of-type selector in jQuery: Example 1: This example changes the background-color to green and text-color to white, of the last element of their parents (div tags). C/C++ C
2 min read
jQuery :nth-last-child() Selector
The jQuery :nth-last-child() selector is used to select all elements that are the nth last child of their parent. The counting of elements starts from the last element. Syntax: :nth-last-child( n | even | odd | formula )Parameters: The :nth-last-child() selector contain parameters which are listed below: n: It holds the child index number of the se
2 min read
jQuery :last-child Selector
It is a jQuery Selector used to select every element that is the last child of its parent. Syntax: $(":last-child")Example 1: Here is the basic example of a last-child selector. C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;jQuery :last-child Selector&lt;/title&gt; &lt;script src= &quot;https://ajax.googleapis.com/ajax/lib
1 min read
jQuery :nth-last-of-type() Selector
The jQuery :nth-last-of-type() Selector is used to select all child of a parent with the same element name, counting from the last to first. It uses 1-indexed counting. Syntax: element:nth-last-of-type(n|even|odd|formula)Parameters: n: It selects nth element from last.even: It selects every even element from last.odd: It selects every odd element f
2 min read
CSS :last-child Selector
The :last-child Selector is used to target the last child element of it's parent for styling. This selector is same as ":nth-last-child". Syntax: :last-child { //property } Example: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; p:last-child { background: limegreen; color: white; font-style: italic; font-size: 1.875em; } &lt;/style
1 min read
CSS :last-of-type Selector
The :last-of-type Selector is used to target the last child element of the same type of it's parent for styling. This selector is same as ":nth-last-of-type". Syntax: :last-of-type { //property } Example: C/C++ Code &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;style&amp;gt; p:last-of-type { background: limegreen;
1 min read
CSS :nth-last-child() Selector
The nth-last-child() selector in CSS is used to match elements based on their position among the group of siblings, counting from the end. Syntax: :nth-last-child(number) { //CSS Property } Where number is the argument that represents the pattern for matching elements counting from the end. It can be odd, even or in a functional notation. odd: It r
2 min read
CSS :nth-last-of-type() Selector
The:nth-last-of-type() Selector in CSS is used to style only those elements which are the nth number of child of the parent element. The selector counts from the last-child element. A n could be a number, a keyword, or a formula. Syntax: :nth-last-of-type(number) { //css Property; } Where number is the argument that represents the pattern for match
2 min read
CSS :not(:last-child):after Selector
The : not(:last-child): after CSS selector is employed in front-end web development to style elements, specifically adding content after each child element except the last one. This selector is useful when we want to target elements that cannot be directly selected. It is commonly used to enhance styling and visual presentation in HTML layouts. App
3 min read