Don't understand nth-child(4)


#1


https://www.codecademy.com/en/courses/web-beginner-en-GfjC6/0/3?curriculum_id=50a3fad8c7a770b5fd0007a1


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)');
    $target.fadeOut('fast');
});


#2

Take a look at my comments:

<ul>
  <!-- first child of ul -->
  <li>
    <ol>
      <!-- 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>
    </ol>
  </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>
</ul>

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


#3

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


#4

Great! You're very welcome :slight_smile:


#5

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