title: use querySelectorAll() to select second element of the list
body: <p>Recently I am starting to learn HTML and JS. When I am leaning the <code>document.querySelectorAll()</code> API, I saw it can use </p>
  
  <p><code>document.querySelectorAll('#example-container li:first-child');</code></p>
  
  <p>to select the first child of the list which has id name is example-container. </p>
  
  <p>So I thought may be </p>
  
  <p><code>document.querySelectorAll('#example-container li:second-child');</code></p>
  
  <p>can select the second child of the list which has id name is example-container. </p>
  
  <p>But obviously it is wrong. So I am confused how can I access the second or third item of the list by using <code>querySelectorAll()</code>?</p>
  
  <p>I post the HTML code below:</p>
  
  <pre><code>&lt;div id="example-container"&gt;
    &lt;ul&gt;
      &lt;li class="feature"&gt;Luxurious sized master suite&lt;/li&gt;
      &lt;li class="feature"&gt;Oversized walk-in closet&lt;/li&gt;
      &lt;li class="feature"&gt;Frameless Beech cabinetry with concealed hinges&lt;/li&gt;
      &lt;li class="feature"&gt;Elegant slab white quartz countertops with large backsplash&lt;/li&gt;
      &lt;li class="feature"&gt;Dual china sinks with Moen faucets&lt;/li&gt;
      &lt;li class="feature"&gt;Clear frameless shower enclosures&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>