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...