jQuery :last Selector

jQuery | :last Selector: Learn about the jQuery :last Selector with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on November 04, 2022

:last Selector

In jQuery, selectors are a parameter through which we can select the HTML element. Selectors can comprise – class names, ids, tag names, attributes, etc. Basically, by using selectors, the appropriate HTML-DOM element can be selected and hence performed actions on it. Here, we are discussing the jQuery :last Selector.

The jQuery :last selector helps to select the very last occurrence of the specified tag. It only returns a single element. It is used along with some tag names prepended to it. It will then return the last element on the document.

:last Selector Syntax

$('elementName:last');

Once the element is selected, you can access it and perform the actions that you want to perform on it. The example given below shows the selection of the last element of the div tag on click by passing the appropriate selector.

jQuery :last Selector Example

<!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">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
    <style>
      .color{
      color: darkblue;
      font-size: large;
      font-weight: bold;
      }
    </style>
  </head>
  
  <body>
    <h2>jQuery - :last Selector</h2>
    <p>Click the button to Select the last element of the specified tag.</p>
    <button>:last Selector</button>
    <hr>
    <div class="color" id="one">Welcome to Include Help !</div>
    <p id="two">This is a jQuery Tutorial for Selectors.</p>
    <div class="color" id="three">Thanks for visiting !</div>
    <hr>
    <h3></h3>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $('button').click(function(){
            $('div:last').css({'color':'red','font-size':'larger'});
        });
    });
  </script>
</html>

Output:

jQuery :first Selector

jQuery :first-child Selector

Comments and Discussions!

Load comments ↻