title: Why does the the :last-child selector only selects the "lastest child"?
body: <p>I've tried it a few times, and each time the next thing happens:
  When I use the <code>:last-child</code> selector, it only selects the very last child of the document, while the <code>:first-child</code> selector selects <strong>all</strong> the first children of the document. Can someone explain me why? <br><br>
  Examples: <br></p>
  
  <p><strong>:first-child</strong></p>
  
  <pre><code>&lt;style&gt;
  p:first-child {background: pink;}
  &lt;/style&gt;
  &lt;body&gt;
  &lt;p&gt; This is the first child of the body so the background color is pink &lt;/p&gt;
  &lt;p&gt; This is some text in a paragraph &lt;/p&gt;
  &lt;p&gt; This is some text in a paragraph &lt;/p&gt;
  &lt;div&gt;
  &lt;p&gt; This is the first child of the div so the background color is also pink &lt;/p&gt;
  &lt;p&gt; This is some text in a paragraph &lt;/p&gt;
  &lt;p&gt; This is some text in a paragraph &lt;/p&gt;
  &lt;/div&gt; 
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>:last-child</strong></p>
  
  <pre><code>&lt;style&gt;
  p:last-child {background: pink;}
  &lt;/style&gt;
  &lt;body&gt;
  &lt;p&gt; This is some text in a paragraph &lt;/p&gt;
  &lt;p&gt; This is some text in a paragraph &lt;/p&gt;
  &lt;p&gt; I expect that this will have a pink background but it won't :( Why? &lt;/p&gt;
  
  &lt;div&gt;
  &lt;p&gt; This is some text in a paragraph &lt;/p&gt;
  &lt;p&gt; This is some text in a paragraph &lt;/p&gt;
  &lt;p&gt; This is the last child of div and only this paragraph has a pink background &lt;/p&gt;
  &lt;/div&gt; 
  &lt;/body&gt;
  </code></pre>
  
  <p>Thanks!</p>