nth-child for Internet Explorer

The nth-child pseudo-class allows you to match elements on the basis of their positions within a parent element. A good use case for nth-child, is for menu navigation separators that are in-between each item like this:

If you were to just apply a border-left to each list item, you would have a line before the first item on the left. To remove the border-left on the first item, we use nth-child:

ul#menu-main-nav li.menu-item{
border-left: 1px solid #FFF;
}

ul#menu-main-nav li:nth-child(1).menu-item{
border-left: none;
}

The nth-child will over-write the border and remove it on the first menu item, thus the (1).

Unfortunately, this is how it looks in Internet Explorer:

This is because Internet Explorer up to version 8 does not support nth-child. (version 9 does though!).

So to ensure our menu navigation looks the same in all browsers, we can use jQuery.

Add this to your header.php. We call Google’s jQuery library first then apply a function to add a noleftborder class to the list item with our nth-child:

Then edit your CSS to use the noleftborder class instead of nth-child:

ul#menu-main-nav li.noleftborder{
border-left: none;
}

Now your menu navigation will look the same in all browsers!