: último hijo no funciona como se esperaba?

El problema se encuentra dentro de este CSS y HTML. Aquí hay unenlace a jsFiddle con el código de ejemplo.

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;
}

No debería ninguna de estas líneas de CSS apuntar alúltimo elemento li con la clase "completa"?

Esta consulta en jQuery no tiene como objetivo:

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

Pero este hace:

$("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>

Respuestas a la pregunta(3)

Su respuesta a la pregunta