Using the last-child selector

Question

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?

Answer 1

The :last-child pseudoclass still cannot be reliably used across browsers. In particular, Internet Explorer versions < 9, and Safari < 3.2 definitely don't support it, although Internet Explorer 7 and Safari 3.2 do support :first-child, curiously.

Your best bet is to explicitly add a last-child (or similar) class to that item, and apply li.last-child instead.

Answer 2

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.