title: Why jQuery's last() is not working on the last occurrence of an HTML element?
body: <p><strong>Overview:</strong></p>
  
  <p>In the following code, I am supposed to highlight the last occurrence of an html element with id = "sample" i.e. "This is the last paragraph". However, "This is the first paragraph" gets highlighted instead. </p>
  
  <p><strong>Questions:</strong></p>
  
  <p>1) Why is  $("#sample:last").css("background-color", "yellow") not highlighting the last paragraph?</p>
  
  <p>2) When I change to $("p#sample:last").css("background-color", "yellow"), then the last paragraph gets highlighted. Why does this work and not the scenario in question 1? </p>
  
  <pre><code>  &lt;!DOCTYPE html&gt;
    &lt;html&gt;
      &lt;head&gt;
        &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script&gt;
          $(document).ready(function(){
              $("#sample:last").css("background-color", "yellow");
          });
        &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
        &lt;p id="sample"&gt;This is the first paragraph.&lt;/p&gt;
        &lt;p id="sample"&gt;This is the second paragraph.&lt;/p&gt;
        &lt;p id="sample"&gt;This is the last paragraph.&lt;/p&gt;
  
      &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>