Menu
I am using less and trying to get the last input to have a margin-bottom of 10px. Here is what I have, but it is not working, and not applying the margin-bottom on the last input. Any ideas why?
input {
margin-bottom: 0px;
&:last-child {
margin-bottom: 10px;
}
}
And the HTML
<form id="auth-form">
<input id="ember367" class="ember-view ember-text-field" placeholder="Email" type="email" name="email">
<input id="ember368" class="ember-view ember-text-field" placeholder="Password" type="password" name="password">
<div class="clear"></div>
<a class="pull-left forgot-password">Forgot password?</a>
<button class="pull-right" data-ember-action="1" type="button">Sign In</button>
</form>
765
The :not() selector excludes the element passed to it from selection. The :last-child selector selects the last child. Combining these two above selector to excludes the last children (inner-div) of every parent div from the selection.
When designing and developing web applications, sometimes we need to select all the child elements of an element except the last element. To select all the children of an element except the last child, use :not and :last-child pseudo classes.
The :nth-last-child(n) selector matches every element that is the nth child, regardless of type, of its parent, counting from the last child. n can be a number, a keyword, or a formula.
The :last-child selector allows you to target the last element directly inside its containing element. 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 content.
Your last input is not the last child — that would be your button.
Use :last-of-type instead to select the last input:
input {
margin-bottom: 0px;
&:last-of-type {
margin-bottom: 10px;
}
}
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
