HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery nth-of-type vs nth-child demo</title>
  <style>
    body { font-family: sans-serif; padding: 16px; }
    .box { padding: 12px; background: #f8fafc; border-radius: 8px; max-width: 360px; }
    span, p { display: block; margin: 6px 0; padding: 8px; border-radius: 6px; background: #f1f5f9; }
    .of-type { outline: 2px solid #2563eb; }
    .of-child { outline: 2px solid #ea580c; }
    #log { margin-top: 12px; font-family: monospace; white-space: pre-line; }
  </style>
</head>
<body>
  <div class="box">
    <p>Intro paragraph (first child)</p>
    <span>Span A</span>
    <span>Span B</span>
  </div>
  <div id="log"></div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("span:nth-of-type(1)").addClass("of-type");
    $("span:nth-child(1)").addClass("of-child");

    $("#log").text(
      "nth-of-type(1) on span → " + ($("span:nth-of-type(1)").length ? "Span A" : "none") + "\n" +
      "nth-child(1) on span → " + ($("span:nth-child(1)").length ? "matched" : "none (p is first child)")
    );
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery :nth-of-type() vs :nth-child() — mixed tags (Try It)