jQuery :nth-last-child() Selector

Quiz

The :nth-last-child() selector is used to select one or more elements based on their position among the siblings, counting from the end.

This selector takes a specific number, keyword (even or odd), or a formula (an + b) to match elements based on their position.

Unlike the :nth-child() selector, which counts from the start, :nth-last-child() counts from the last child towards the first.

Syntax

Following is the syntax of jQuery :nth-last-child() Selector −

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

Parameters

Here is the description of the above syntax −

n: Selects the nth child element of its parent. Indexing starts from 1, not 0.
even|odd: Selects even-numbered and odd-numbered child elements, respectively.
formula: Selects elements based on a mathematical formula (an+b). "a" and "b" are integers.

Example 1

In the following example, we are using the "jQuery :nth-last-child()" Selector to select the 2nd <li> child of its parent (<ul>), counting from the last child −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
          $("li:nth-last-child(2)").css("background-color", "yellow");
        });
        </script>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</body>
</html>

After executing the above program, the second last <li> element will be highlighted with yellow background color.

Example 2

In this example, we are using the "odd" and "even" parameters to select both odd and even child (<li>) elements, counting from the last child −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
          $("li:nth-last-child(odd)").css("background-color", "yellow");
          $("li:nth-last-child(even)").css("background-color", "lightblue");  
        });
    </script>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
    </ul>
</body>
</html>

After executing the program, the odd-numbered list items will be highlighted with yellow background color and even-numbered items to light blue, counting from the last child.

Example 3

The p:nth-last-child(3n+1) selects every first and subsequent third paragraph within the <div> element, counting from the last child −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
          $("p:nth-last-child(3n+1)").css("background-color", "yellow");
        });
    </script>
</head>
<body>
<div>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
    <p>Paragraph 5</p>
    <p>Paragraph 6</p>
    <p>Paragraph 7</p>
    <p>Paragraph 8</p>
</div>
</body>
</html>

After executing the above program, the selected elements will be highlighted with yellow background color.

jquery_ref_selectors.htm

Print Page