using last-child in css

Question

the below css doesnt works on below given html. The purpose is to apply the css on the last 'li', but it doesnt.

#refundReasonMenu #nav li:last-child
{
  border-bottom: 1px solid #b5b5b5;
}

and html looks like

<div id="refundReasonMenu">
  <ul id="nav">
   <li><a id="abc" href="#">abcde</a></li>
   <li><a id="def" href="#">xyz</a></li>
  </ul>
</div>

Answer 1

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;
}

Answer 2

The :last-child pseudoclass still cannot be reliably used across browsers. In particular, Internet Explorer (6 and 7), and Safari definitely don't support it, although Internet Explorer 7 and Safari 3 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 3

last-child pseudo class does not work in IE

CSS Compatibility and Internet Explorer

IE7 CSS Selectors: How they fail

Answer 4

To add to VoteyDisciple's answer: there are a few browsers that don't render the CSS attached to :last-child. These browsers are: IE6, IE7, IE8. All other browsers do support :last-child.

View a complete overview of browser support for :last-child

Answer 5

As an alternative to using a class you could use a detailed list, setting the child dt elements to have one style and the child dd elements to have another. Your example would become:

#refundReasonMenu #nav li:dd
{
  border-bottom: 1px solid #b5b5b5;
}

html:

<div id="refundReasonMenu">
  <dl id="nav">
        <dt><a id="abc" href="#">abcde</a></dt>
        <dd><a id="def" href="#">xyz</a></dd>
  </dl>
</div>

Neither method is better than the other and it is just down to personal preference.

Answer 6

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 if you only have 2 items in the list like your example.

Answer 7

IE you go to hell!!

Answer 8

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