html - :last-child not working as expected?

Question

The issue lies within this CSS and HTML. Here is a link to jsFiddle with the sample code.

HTML

<ul>
    <li class"complete">1</li>
    <li class"complete">2</li>
    <li>3</li>
    <li>4</li>
</ul>

CSS

li.complete:last-child {
    background-color:yellow;
}

li.complete:last-of-type {
    background-color:yellow;
}

Shouldn't either of these lines of CSS target the last li element with the "complete" class?

This query in jQuery doesn't target it either:

$("li.complete:last-child");

But this one does:

$("li.complete").last();

li {
  background-color: green;
}
li.complete:first-child {
  background-color: white;
}
li.complete:first-of-type {
  background-color: red;
}
li.complete:last-of-type {
  background-color: blue;
}
li.complete:last-child {
  background-color: yellow;
}

<ul>
  <li class="complete">1</li>
  <li class="complete">2</li>
  <li>3</li>
  <li>4</li>
</ul>

Answer 1

The last-child selector is used to select the last child element of a parent. It cannot be used to select the last child element with a specific class under a given parent element.

The other part of the compound selector (which is attached before the :last-child) specifies extra conditions which the last child element must satisfy in-order for it to be selected. In the below snippet, you would see how the selected elements differ depending on the rest of the compound selector.

.parent :last-child{ /* this will select all elements which are last child of .parent */
  font-weight: bold;
}

.parent div:last-child{ /* this will select the last child of .parent only if it is a div*/
  background: crimson;
}

.parent div.child-2:last-child{ /* this will select the last child of .parent only if it is a div and has the class child-2*/
  color: beige;
}

<div class='parent'>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div>Child w/o class</div>
</div>
<div class='parent'>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child-2'>Child w/o class</div>
</div>
<div class='parent'>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <p>Child w/o class</p>
</div>