How to apply CSS in even childs of parent node using jQuery ?
In this article, we will see how to set styles in even child of parent element using jQuery. To set the style on even child of the parent, we use jQuery :nth-child(even) selector.
The :nth-child(even) selector is used to select every element that is the even child of its parent element.
Syntax:
$("Selector:nth-child(even)")Approach: First, we create an HTML element containing a div element. This div element contains some paragraph element, then we use :nth-child() selector to select all even position child 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:nth-child(even)").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 even childs of parent node using jQuery library? </h3> <div> <p>Data Structure</p> <p>C++ Programming</p> <p>javaScript</p> <p>Web Technology</p> </div></body> </html> |
Output:
Please Login to comment...