title: Select last element of item in a list with the DOM
body: <p>Without using jQuery (because I have yet to even start that section yet), and just using some good old JavaScript/DOM, how could I select the last element of an item in a list. </p>
  
  <p>For example I have the following HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section id="container"&gt;
    &lt;ul&gt;
      &lt;li class="first"&gt;one&lt;/li&gt;
      &lt;li class="second"&gt;two&lt;/li&gt;
      &lt;li class="third"&gt;three&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ol&gt;
      &lt;li class="first"&gt;one&lt;/li&gt;
      &lt;li class="second"&gt;two&lt;/li&gt;
      &lt;li class="third"&gt;three&lt;/li&gt;
    &lt;/ol&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And I want to select this item and return it in the DOM:  <code>&lt;li class="third"&gt;three&lt;/li&gt;</code> from the <code>ol</code> list.
  I understand that <code>document.querySelector</code> only selects the first element in the document, which would be <code>document.querySelector('li.third')</code>. How would I do the opposite and select the last?</p>