How to apply CSS in last child of parent using jQuery ?
In this article, we will see how to set styles in last child of parent element using jQuery. To set the style on last child of parent, we use jQuery :last-child selector.
The :last-child selector is used to select every element that is the last child of its parent element.
Syntax:
$("Selector:last-child")
Approach: First, we create an HTML element containing a div element. This div element contains some paragraph element, then we use :last-child selector to select last paragraph of the parent element.
Example:
HTML
<!DOCTYPE html> < html > < head > < script src = </ script > < style > div { font-size: 18px; font-weight: bold; } p { margin-left: 50px; } </ style > < script > $(document).ready(function() { $("p:last-child").css({ backgroundColor: "green", color: "white", padding: "5px 15px", display: "table" }); }); </ script > </ head > < body > < h1 style = "color: green;" >GeeksforGeeks</ h1 > < h3 > How to apply CSS in last child of parent using jQuery library? </ h3 > < div > < span >GeeksforGeeks Courses:</ span > < p >Data Structure</ p > < p >C++ Programming</ p > < p >javaScript</ p > < p >Web Technology</ p > </ div > </ body > </ html > |
Output:
Please Login to comment...