HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>jQuery first-child demo</title>

  <style>

    body { font-family: sans-serif; padding: 16px; }

    span { color: #008; display: inline-block; margin-right: 4px; }

    span.sogreen { color: green; font-weight: bolder; }

  </style>

</head>

<body>

  <div>

    <span>John,</span>

    <span>Karl,</span>

    <span>Brandon</span>

  </div>

  <div>

    <span>Glen,</span>

    <span>Tane,</span>

    <span>Ralph</span>

  </div>

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

  <script>

    $("div span:first-child")

      .css("text-decoration", "underline")

      .hover(function() {

        $(this).addClass("sogreen");

      }, function() {

        $(this).removeClass("sogreen");

      });

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery div span:first-child — official demo (Try It)