Don't understand nth-child(4)


I simply don't understand why li:nth-child(4) would work. There are 7 list items in the HTML, isn't nth-child(4) the fourth list item?

$(document).ready(function() {
    var $target=$('li:nth-child(4)');


Take a look at my comments:

  <!-- first child of ul -->
      <!-- first child of ol -->
      <li>Start with the function keyword</li>
      <!-- second child of ol -->
      <li>Inputs go between ()</li>
      <!-- third child of ol -->
      <li>Actions go between {}</li>
      <!-- fourth child of ol -->
      <li>jQuery is for chumps!</li>
  <!-- second child of ul -->
  <li>Inputs are separated by commas.</li>
  <!-- third child of ul -->
  <li>Inputs can include other functions!</li>
  <!-- fourth child of ul -->
  <li>This list item will also be faded out!</li>

li:nth-child(4) will select all <li> elements that are fourth child of the parent element.


Thank you so much. It makes sense to me now.


Great! You're very welcome :slight_smile:


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.