jQuery: Border around all list items that are children of a specified class of an unordered list

Last update on August 19 2022 21:51:35 (UTC/GMT +8 hours)

jQuery Fundamental - II : Exercise-57

Write a program to places a border around all list items that are children of a specified class of an unordered list.

Sample solution :

HTML Code :

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Border around all list items that are children of  a specified class of an unordered list.</title>
</head>
<body>
<ul class="tutorial">
<li>Frontend</li>
<li>Backend
<ul>
<li>C#</li>
<li>Java</li>
<li>PHP</li>
<li>Python</li>
</ul>
</li>
<li>Database
<ul>
<li>MySQL</li>
<li>PostgreSQL</li>
<li>SQLite</li>
<li>Oracle</li>
</ul>
</li>
</ul>
</body>
</html>

JavaScript Code :

$( "ul.tutorial > li" ).css( "border", "3px double blue" );

See the Pen jquery-fundamental-exercise-57 by w3resource (@w3resource) on CodePen.

Contribute your code and comments through Disqus.

Previous: Finds the checked radio input.
Next: Using jQuery find all children of each division.