Miral Miral - 3 months ago 24
CSS Question

Using the last-child selector

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

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.