How To Get the CSS3 :last-child Pseudo Class To Work in IE

Big surprise. Here’s just another thing that IE8 doesn’t support. There ought to be some sort of law against producing a web browser that doesn’t support web standards. The css3 :last-child pseudo-class is supported in IE9, but if you need to control the styling on the last item in a list for IE6 to 8, then you have a problem.

You could hard code a class of ‘last’ on the last list item and then target that class in your css. But what about a list that is generated dynamically in WordPress such as a menu? I’m working on a site for a client and there is a menu toward the bottom of the page near the footer. I have a 1px border between each list item, but it just doesn’t look right to have the line after the last list item.

Of course, the right way to do this is simply to use something like this in your css code:

.custom #menu li:last-child { border-right:none; }

But if you want that border to not show up in IE, you’re out of luck. So one solution would be to use a tool called selectivizr, but I came up with this quick method using jQuery which just works.

We’re going to use jQuery to insert a class of ‘last’ or ‘last-child’ or whatever you want on the last item in the list. Insert this code into your custom-functions.php file:

function last_child() {
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script>
 $(document).ready(function() {
	$("#nav li:last-child").addClass('last');
 });
</script>
<?php
}

add_action('thesis_hook_after_html','last_child');

This will add a class of ‘last’ to the last list item in the list with an ID of #nav. Now you can simply style this as follows:

.custom #nav .last { border-right:none; }

Important: Don’t reload jQuery if you already have it referenced elsewhere, so you would not include line #3

You can learn more about CSS3 browser support here.

Tagged as: css, css3, thesis tips, web design