html - :last-of-type doesn't work -

i have html document 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 css selector .item.item-input:last-of-type grab 4th label element , last .item.item-input element of form parent.

what doing wrong?

:last-of-type matches element last element of type (tag) within (first-level) parent, period. doesn't know or care other selectors may have combined, including class selectors such .item-input, or else.

there no straightforward way in css accomplish want, expressed :last-of-selector. alternatives have been suggested include

1. wrap first 4 elements in separate div, can :last-of-type within it.

2. have (server, local js) mark element want specific class, , refer it.

3. other hacks, such hard-wiring number of elements @ end want skip, , use :nth-last-of-type.

4. give elements in question different tag, if can manage, , can use last-of-type.