HTML Code

<!DOCTYPE html>



<html lang="en">



<head>



  <meta charset="utf-8">



  <title>first vs first-child</title>



  <style>



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



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



    .one { outline: 3px solid #dc2626; }



    .fc { background: #bbf; }



    #output { margin-top: 12px; padding: 12px; background: #e0f2fe; border: 1px solid #0284c7; }



  </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>



    $("li:first").addClass("one");



    $("li:first-child").addClass("fc");



    $("#output").html(



      ":first → " + $("li:first").length + " (only A1 outlined)<br>" +



      ":first-child → " + $("li:first-child").length + " (A1 and B1 highlighted)"



    );



  </script>



</body>



</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

:first vs :first-child (Try It)