Question

I know there are some ways to get the “lastchild” work for Internet Explorer. CSS doesn’t seem to work that well.
I read about a jQuery version, but am not sure how to do that exactly.

I only need this because I use list styles with border-top and border-bottom to create “shadow-effects”.

Here’s my website.
The top navigation menu has a lastchild definition in a javascript fild but it doesn’t seem to take proper effect:

jQuery("ul.menu li:last-child").addClass("last-child");
jQuery("ul.menu li:first-child").addClass("first-child");

The original CSS was something like that, but this displays the borders left and right in Firefox, too!:

.jqueryslidemenu ul li.first-child a{border-left:none}
.jqueryslidemenu ul.sub-menu li.first-child a{border-left:1px solid #444444!important}
.jqueryslidemenu ul li.last-child a{border-right:none}
.jqueryslidemenu ul.sub-menu li.last-child a{border-right:1px solid #444444!important}
/*IE6 hack to get sub menu links to behave correctly*/
* html .jqueryslidemenu ul li a{display: inline-block;}

I changed it to that and now the right-border only shows up in IE!:

.jqueryslidemenu ul li:first-child a{border-left:none;}
.jqueryslidemenu ul.sub-menu li.first-child a{border-left:1px solid #444444!important;}
.jqueryslidemenu ul li:last-child a{border-right:none;}
.jqueryslidemenu ul.sub-menu li.last-child a{border-right:1px solid #444444!important;}
/*IE6 hack to get sub menu links to behave correctly*/
* html .jqueryslidemenu ul li a{display: inline-block;}

Answer 1

Set the CSS programmatically using .children().last().css()

Or if you know which element is that while you are laying it out (in the backend), add a class of last to it.