The :nth-last-child() selector is used to select all elements those are the nth 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 = </ 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 = </ 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: