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 selected elements. The counting starts from the end. The index number of the first child is 1.
- even: It selects all even child elements.
- odd: It selects all odd child elements.
- 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 the white of the second last heading of their parents (div tags).
HTML
<!DOCTYPE html><html> <head> <title> jQuery :nth-last-child() Selector </title> <script src= </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 the text color to white of the second last heading of the <body> tag.
HTML
<!DOCTYPE html><html> <head> <title> jQuery :nth-last-child() Selector </title> <script src= </script> <!-- Script to use nth-last-child selector --> <script> $(document).ready(function () { $("h4:nth-last-child(3)").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:
Please Login to comment...