Using the last-child selector

user_55891 0
Viewed 187344

My goal is to apply the CSS on the last li, but it doesn't do that.

#refundReasonMenu #nav li:last-child {
    border-bottom: 1px solid #b5b5b5;
}
<div id="refundReasonMenu">
     <ul id="nav">
      <li><a id="abc" href="#">abcde</a></li>
      <li><a id="def" href="#">xyz</a></li>
     </ul>
    </div>

How can I select only the last child?

css-selectors css
11 Answers

Another solution that might work for you is to reverse the relationship. So you would set the border for all list items. You would then use first-child to eliminate the border for the first item. The first-child is statically supported in all browsers (meaning it can't be added dynamically through other code, but first-child is a CSS2 selector, whereas last-child was added in the CSS3 specification)

Note: This only works the way you intended if you only have 2 items in the list like your example. Any 3rd item and on will have borders applied to them.

user_2608030
Related