Open In App

How to make border around all unordered list items that are children of a specified class using jQuery ?

Improve
Improve
Like Article
Like
Save
Share
Report

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
Previous
Next
Share your thoughts in the comments
Similar Reads