HTML Code

<!DOCTYPE html>



<html lang="en">



<head>



  <meta charset="utf-8">



  <title>nth-of-type equivalence</title>



  <style>



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



    li { margin: 4px 0; padding: 4px 8px; border: 1px solid #ccc; }



    #output { margin-top: 12px; padding: 12px; background: #fef3c7; border: 1px solid #d97706; font-family: monospace; }



  </style>



</head>



<body>



  <ul><li>A1</li><li>A2</li></ul>



  <ul><li>B1</li><li>B2</li></ul>



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



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



  <script>



    var fot = $("li:first-of-type").length;



    var nth = $("li:nth-of-type(1)").length;



    $("#output").text(



      ":first-of-type → " + fot + "\n:nth-of-type(1) → " + nth + " (identical)"



    );



  </script>



</body>



</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

:first-of-type vs :nth-of-type(1) (Try It)