HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>jQuery child selector demo</title>

  <style>

    body { font-size: 14px; font-family: sans-serif; }

    ul.topnav { list-style: none; padding: 0; }

    ul.topnav > li { margin: 8px 0; padding: 8px; }

  </style>

</head>

<body>

  <ul class="topnav">

    <li>Item 1</li>

    <li>Item 2

      <ul>

        <li>Nested item 1</li>

        <li>Nested item 2</li>

        <li>Nested item 3</li>

      </ul>

    </li>

    <li>Item 3</li>

  </ul>

  <p>Only top-level items (Item 1, Item 2, Item 3) get a red double border.</p>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <script>

    $("ul.topnav > li").css("border", "3px double red");

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery ul.topnav > li — official demo (Try It)