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?
If you think you can use Javascript, then since jQuery support last-child, you can use jQuery's css method and the good thing it will support almost all the browsers
Example Code:
$(function(){
$("#nav li:last-child").css("border-bottom","1px solid #b5b5b5")
})
You can find more info about here : http://api.jquery.com/css/#css2
It's hard to say without seeing the rest of your CSS, but try adding !important in front of the border color, to make it like so:
#refundReasonMenu #nav li:last-child
{
border-bottom: 1px solid #b5b5b5 !important;
}