I want to draw bottom-border
under some div elements inside their parent but except the last two, knowing that number of child element is changeable:
<div id="parent">
<div>
One
</div>
<div>
Two
</div>
<div>
Three
</div>
<div>
Four
</div>
</div>
Is it possible to select all child elements except the last two?
In this case, something like
#parent > div:not(:nth-last-of-type(-n+2)) {
border-bottom: 1px solid red;
}
JSFiddle
:nth-last-child
should do the job (combined with :not
).
#parent >:not(:nth-last-child(-n+2)) {
border-bottom: solid black 1px;
}
<div id="parent">
<div>
One
</div>
<div>
Two
</div>
<div>
Three
</div>
<div>
Four
</div>
<div>
Five
</div>
<div>
Six
</div>
<div>
Seven
</div>
</div>
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