How to make border around all unordered list items that are children of a specified class using jQuery ?
In this article, we will see how to set a border around all list items that are children of a specified class of an unordered list using jQuery. This task can be done by using the children selector() method.
children selector(“parent > child”) – As you notice from the name itself that it takes two arguments and then perform the task. It selects all children element specified by a child of elements specified by the “parent”. Here the parent is any selector and the child is a selector to filter the child elements.
Example: Places a border around all list items that are children of <ul class=”GFG”>.
HTML
<!doctype html>
< html lang = "en" >
< head >
< script src =
</ script >
</ head >
< body >
< ul class = "GFG" >
< h1 style="color: green;
text-align: center;">
GeeksforGeeks
</ h1 >
< li >DataBase
< ol >
< li >oracle</ li >
< li >MySql</ li >
< li >DB2</ li >
</ ol >
</ li >
< li >Computer Networks
< ol >
< li >LAN</ li >
< li >MAN</ li >
< li >WAN</ li >
</ ol >
</ li >
< li >Operating system
< ol >
< li >Linux</ li >
< li >Mac</ li >
< li >Windows</ li >
</ ol >
</ li >
</ ul >
< script >
$("ul.GFG > li")
.css("border", "2px dashed green");
</ script >
</ body >
</ html >
|
Output –
Last Updated :
22 Apr, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...