jQuery | :nth-last-child() Selector

Last Updated : 22 Feb, 2019

The :nth-last-child() selector is used to select all elements those are the n^th last child of their parent. The counting of element starts from last element.

Syntax:

:nth-last-child(n|even|odd|formula)

Parameters: The :nth-last-child() selector contains parameters which are listed below:

n: It holds the child index number of selected element. The counting starts from end. The index number of first child is 1.
even: It selects all even child element.
odd: It selects all odd child element.
formula: It is used to specify the formula to select the child element. The formula can be in form of (an + b).

Below examples illustrate the :nth-last-child() selector in jQuery:

Example 1: This example changes the background-color to green and text-color to white, of the second last heading of their parents (div tags).

<!DOCTYPE html>   
<html>   
    <head>  
        <title>  
            jQuery | :nth-last-child() Selector 
        </title> 
          
        <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
        </script> 
          
        <!-- Script to use nth-last-child selector -->
        <script> 
            $(document).ready(function() { 
                $("h4:nth-last-child(2)").css({ 
                    "background-color": "green",  
                    "color": "white" 
                }); 
            }); 
        </script> 
          
        <style> 
            option { 
                font-weight: bold; 
                font-size: 25px; 
                color: green; 
            } 
            select { 
                font-weight: bold; 
                font-size: 25px; 
                color: green; 
            } 
        </style> 
    </head> 
      
    <body style="text-align:center;">   
        <h1>   
            jQuery | :nth-last-child() Selector 
        </h1>  
          
        <div style= "border: 1px solid blue;"> 
            <h4>The first heading in first div.</h4> 
            <h4>The second last heading in first div.</h4> 
            <h4>The last heading in first div.</h4> 
        </div><br> 
          
        <div style= "border: 1px solid blue;"> 
            <h4>The first heading in second div.</h4> 
            <h4>The second last heading in first div.</h4> 
            <h4>The last heading in second div.</h4> 
        </div>            
    </body>   
</html>        

Output:

Example 2: This example changes the background-color to green and text-color to white, of the second last heading of < body > tag.

<!DOCTYPE html>   
<html>   
    <head>  
        <title>  
            jQuery | :nth-last-child() Selector 
        </title> 
          
        <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
        </script> 
          
        <!-- Script to use nth-last-child selector to  
                select nth last odd elements -->
        <script> 
            $(document).ready(function() { 
                $("h4:nth-last-child(odd)").css({ 
                    "background-color": "green",  
                    "color": "white" 
                }); 
            }); 
        </script> 
          
        <style> 
            option { 
                font-weight: bold; 
                font-size: 25px; 
                color: green; 
            } 
            select { 
                font-weight: bold; 
                font-size: 25px; 
                color: green; 
            } 
        </style> 
    </head>  
      
    <body style="text-align:center;">   
        <h1>   
            jQuery | :nth-last-child() Selector 
        </h1>  
          
        <div> 
            <h4>The first heading in body.</h4> 
            <h4>The second last heading in body.</h4> 
            <h4>The Third heading in body.</h4> 
            <h4>The Fourth heading in body.</h4> 
        </div> 
    </body>   
</html>    

Output:

My Personal Notes

Related Articles