:last-of-type doesn't work

Question

I have a HTML document with the abbreviated HTML content:

<div class="list">
    <form name="signupForm">
      <label class="item item-input">
        <input>
      </label>
      <label class="item item-input">
        <input>
      </label>
      <label class="item item-input">
        <input>
      </label>
      <label class="item item-input">
        <input>
      </label>
      <label class="item item-button">
        <input class="button button-block button-positive">
      </label>
      <label class="item item-button">
        <input class="button button-block button-signup">
      </label>
    </form>
</div>

My expected behavior is that the CSS selector .item.item-input:last-of-type will grab the 4th label element and the last .item.item-input element of the form parent.

What am I doing wrong?

Answer 1

Apparently :last-of-type (from the MDN Docs) can only be used with namespace and type selectors (tag name selectors like input).

I suggest changing your HTML structure to wrap the .item-input elements in a <div>. Alternatively, I have also seen a .last class manually added to substitute the pseudo-selector.