Menu
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?
585
class is not possible with last-of-type . Edit: To actually add something constructive to this answer, you could fallback to JavaScript to locate this selector, or revise your markup/CSS.
The :last-of-type selector matches every element that is the last child, of a particular type, of its parent. Tip: This is the same as :nth-last-of-type(1).
The :nth-last-of-type selector allows you select one or more elements based on their source order, according to a formula. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling elements.
To select the last element of a specific class, you can use the CSS :last-of-type pseudo-class.
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.
64
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
