jQuery :last-of-type Selector
The jQuery :last-of-type Selector is used to select all elements which are the last child of their parent.
Syntax:
$(":last-of-type")
Below are examples that illustrate the :last-of-type selector in jQuery:
Example 1: This example changes the background-color to green and text-color to white, of the last element of their parents (div tags).
html
<!DOCTYPE html> < html > < head > < title > jQuery | :last-of-type Selector </ title > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > </ script > <!-- Script to use last-of-type selector --> < script > $(document).ready(function () { $("h4:last-of-type").css({ "background-color": "green", "color": "white" }); }); </ script > <!-- CSS property to set style of element --> < 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 | :last-of-type Selector </ h1 > < div style = "border:1px solid blue;" > < h4 >The first 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 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 last heading of <body> tag.
html
<!DOCTYPE html> < html > < head > < title > jQuery | :last-of-type Selector </ title > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > </ script > <!-- Script to use last-of-type selector --> < script > $(document).ready(function () { $("h4:last-of-type").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 | :last-of-type Selector </ h1 > < h4 >The first heading in body.</ h4 > < h4 >The last heading in body.</ h4 > </ body > </ html > |
Output:
Contact Us