title: jquery nth-child selector starting from 2 not 1
body: <p>I meet an extremely bizarre case. With my elements</p>
  
  <pre><code>&lt;div class="main-form col-sm-12"&gt;
      &lt;label class="custom-control custom-checkbox"&gt;
          &lt;input type="checkbox" class="custom-control-input"&gt;
          &lt;span class="custom-control-indicator"&gt;&lt;/span&gt;
          &lt;span class="custom-control-description"&gt;Update this Ticket?&lt;/span&gt;
      &lt;/label&gt;
      &lt;div class="form-group row"&gt;
          &lt;label for="update-subject" class="col-sm-3 col-form-label"&gt;Subject&lt;/label&gt;
          &lt;div class="col-sm-9"&gt;
              &lt;input type="text" class="form-control" id="update-subject" disabled&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group row"&gt;
          &lt;label for="update-body" class="col-sm-3 col-form-label"&gt;Body&lt;/label&gt;
          &lt;div class="col-sm-9"&gt;
              &lt;textarea class="form-control" rows="5" id="update-body" disabled&gt;&lt;/textarea&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group row"&gt;
          &lt;label for="update-email" class="col-sm-3 col-form-label"&gt;Email of contact&lt;/label&gt;
          &lt;div class="col-sm-9"&gt;
              &lt;input type="email" class="form-control" id="update-email" disabled&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group row"&gt;
          &lt;label class="col-sm-3 col-form-label"&gt;Priority&lt;/label&gt;
          &lt;div class="col-sm-3"&gt;
              &lt;input type="text" class="form-control" disabled&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-3" style="display: none;"&gt;
              &lt;select class="form-control col-sm-3" id="update-priority"&gt;
                  &lt;option value="normal"&gt;Normal&lt;/option&gt;
                  &lt;option value="low"&gt;Low&lt;/option&gt;
                  &lt;option value="high"&gt;High&lt;/option&gt;
                  &lt;option value="urgent"&gt;Urgent&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
          &lt;label class="col-sm-3 col-form-label" style='text-align: center;'&gt;Status&lt;/label&gt;
          &lt;div class="col-sm-3"&gt;
              &lt;input type="text" class="form-control" disabled&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-3" style="display: none;"&gt;
              &lt;select class="form-control col-sm-3" id='update-status'&gt;
                  &lt;option value="new"&gt;New&lt;/option&gt;
                  &lt;option value="open"&gt;Open&lt;/option&gt;
                  &lt;option value="pending"&gt;Pending&lt;/option&gt;
                  &lt;option value="hold"&gt;Hold&lt;/option&gt;
                  &lt;option value="solved"&gt;Solved&lt;/option&gt;
                  &lt;option value="closed"&gt;Closed&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group row"&gt;
          &lt;label for="update-comment" class="col-sm-3 col-form-label"&gt;Comment&lt;/label&gt;
          &lt;div class="col-sm-9"&gt;
              &lt;textarea class="form-control" rows="5" id="update-comment" disabled&gt;&lt;/textarea&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I check <code>$('.main-form .form-group:nth-child(4) input')</code>, it returns nothing instead of 2 <code>input</code> elements. I tried running several logs with <code>$('.main-form .form-group nth-child(n)')</code>. When it is 1, it returns nothing, the same goest with <code>first-child</code>. When it is 2, it returns the first element. When it is 5, it returns the element with two <code>input</code> children. When it is 6, it returns the same element with <code>last-child</code>. This is totally non-understandable and ridiculous. May anyone help me with this?</p>