HTML Code

<!DOCTYPE html>



<html lang="en">



<head>



  <meta charset="utf-8">



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



  <style>



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



    span { display: inline-block; margin: 2px 4px; padding: 4px 8px; border: 1px solid #ccc; }



    span.fot { background: #fecaca; color: #991b1b; font-weight: bold; }



    span.fc { outline: 3px solid #2563eb; }



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



  </style>



</head>



<body>



  <div>



    <p>Intro paragraph — first child of this div.</p>



    <span>Lead span</span>



    <span>Second span</span>



  </div>



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



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



  <script>



    $("span:first-of-type").addClass("fot");



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



    $("#output").html(



      ":first-of-type → " + $("span:first-of-type").length + " (Lead span highlighted)<br>" +



      ":first-child → " + $("span:first-child").length + " (no span is first child)"



    );



  </script>



</body>



</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

:first-of-type vs :first-child (Try It)