title: 'h1:nth-child(5)' selects 3rd and not 5th child
body: <p>To the best of my knowledge these are all the H1 tags in index.html.</p>
  <pre><code>&lt;h1 class='header'&gt;Hello, world (1)&lt;/h1&gt;
  &lt;h1 class='header'&gt;Hello, world (2)&lt;/h1&gt;
  &lt;h1 class='header'&gt;Hello, world (3)&lt;/h1&gt;
  &lt;h1 class='header'&gt;Hello, world (4)&lt;/h1&gt;
  &lt;h1 class='header'&gt;Hello, world (5)&lt;/h1&gt;
  &lt;h1 class='header'&gt;Hello, world (6)&lt;/h1&gt;
  
  &lt;h1 class='header' id='header-3'&gt;Hello, world (Header 3)(1)&lt;/h1&gt;
  &lt;h1 class='header' id='header-3'&gt;Hello, world (Header 3)(2)&lt;/h1&gt;
  </code></pre>
  <p>I checked the console logs and they implied I had 8 H1 elements.</p>
  <pre><code> var $header = $(&quot;.header&quot;)        
   console.log(&quot;header length&quot;)
   console.log($header.length)
  </code></pre>
  <p>When I wrote this  <code>$('h1:nth-child(5)').text(&quot;Ironman&quot;)</code> I expected it to adjust the 5th H1 element. Whereas it actually adjusts the 4th.</p>
  <p>When I wrote this <code>$('h1:nth-child(4)').text(&quot;Thanos&quot;)</code> I expected it to adjust the 4th element. Whereas it actually adjusts the 3rd.</p>
  <p>According to w3schools (<a href="https://www.w3schools.com/jquery/sel_nthchild.asp" rel="nofollow noreferrer">https://www.w3schools.com/jquery/sel_nthchild.asp</a>) the first element has the index number 1.</p>
  <p>Could anyone provide clarification as to what is going on?</p>
  <p><strong>Update</strong></p>
  <p>Here is all my code (apologies for the messy way it pasted into StackOverflow).</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
      &lt;!-- Required meta tags --&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;
  
      &lt;!-- Bootstrap CSS --&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css&quot; integrity=&quot;sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M&quot; crossorigin=&quot;anonymous&quot;&gt;
  
       &lt;style&gt;
      /*body {
        background-color: red;
      }*/
      h1 {
        color: green;
      }
  
      #header-3 {
  
      }
      .description {
        width: 250px;
        height: 300px;
      }
    &lt;/style&gt;
  
  
    &lt;/head&gt;
    &lt;body&gt;
  </code></pre>
  <p><code>&lt;script src='https://code.jquery.com/jquery-3.2.1.min.js'&gt;&lt;/script&gt;</code></p>
  <pre><code>    &lt;h1 class='header' id='header-3'&gt;Hello, world (Header 3)(1)&lt;/h1&gt;
      &lt;h1 class='header' id='header-3'&gt;Hello, world (Header 3)(2)&lt;/h1&gt;
     
  
   
     &lt;script type=&quot;text/javascript&quot;&gt;
        $(document).ready(function(){
  
      
          var $header = $(&quot;.header&quot;)        
          console.log(&quot;header length&quot;)
          console.log($header.length)
          
  
          setTimeout(function(){
              $('body').css(&quot;background-color&quot;, &quot;blue&quot;)
              $('h1').css(&quot;color&quot;, &quot;purple&quot;)
              $('h1').text(&quot;Batman&quot;)
              $('h1:nth-child(5)').text(&quot;Ironman&quot;)
              $('#header-3').text(&quot;Captain America&quot;)
              $(&quot;.header&quot;).css(&quot;background-color&quot;, &quot;green&quot;).css(&quot;padding&quot;, &quot;30px&quot;)
          }, 6500) // in ms
       
  
          setTimeout(function(){
              $('body').css(&quot;background-color&quot;, &quot;yellow&quot;)
              $('h1').css(&quot;color&quot;, &quot;purple&quot;)
              $('h1:nth-child(1)').text(&quot;Wolverine&quot;)
              $('h1:nth-child(2)').text(&quot;Magneto&quot;)
              $('h1:nth-child(4)').text(&quot;Thanos&quot;)
              $(&quot;.header&quot;).css(&quot;background-color&quot;, &quot;green&quot;).css(&quot;padding&quot;, &quot;30px&quot;)
          }, 8500) // in ms
        
   })
  
     &lt;/script&gt;
  
  
  
  
      &lt;p class='description'&gt;Another Paragraph&lt;/p&gt;
      &lt;p class='description'&gt;It turns out self-driving cars aren’t dissimilar from self-driving humans: 
  Today, a generation removed from the seminal 2004 Darpa challenge in which the 
  
  “The hype got ahead of the reality, but honestly, it’s gone way faster than I would have ever believed,” says 
  
  automaker still hopes to fulfill that vision by 2021.
  
  Nuro, which rounded up $1 billion from SoftBank, said the cash being deposited in the self-driving landscape has provided a critical slug of optimism. “It doesn’t change our plan or our mission,
  
  &lt;/p&gt;
  
  
  
  
   
     &lt;script type=&quot;text/javascript&quot;&gt;
        $(document).ready(function(){
  
  
          var $description = $(&quot;.description&quot;)
    
  
         
          console.log($description.css(&quot;height&quot;))
         
          console.log($description.height())
  
  
         
         
        
   })
  
     &lt;/script&gt;
  
  
  
     &lt;!-- Optional JavaScript --&gt;
      &lt;!--  Popper.js first, then Bootstrap JS --&gt;
  
      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js&quot; integrity=&quot;sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js&quot; integrity=&quot;sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><strong>Update 2</strong></p>
  <p>Thank you j08691 for your answer.</p>