HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>first-child nth-child</title>

  <style>

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

    p { margin: 8px 0; padding: 6px; border: 1px solid #ccc; }

    #output { margin-top: 12px; padding: 12px; background: #dcfce7; border: 1px solid #22c55e; }

  </style>

</head>

<body>

  <div><p>Para 1</p><p>Para 2</p></div>

  <div><p>Para 3</p><p>Para 4</p></div>

  <div id="output"></div>

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

  <script>

    var a = $("p:first-child").length;

    var b = $("p:nth-child(1)").length;

    $("#output").text(":first-child → " + a + ", :nth-child(1) → " + b + " (same set)");

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

:first-child equals :nth-child(1) (Try It)