So the world of CSS design continues to change rapidly and the arrival of CSS3 has brought us many new CSS pseudo classes, including :last-child, which selects the last element that is the last child of it’s parent element. This is useful when, for example, you’re creating a horizontal navigation list and want to add in a separator between them, such as a right border or graphical separator. You don’t want an extra border hanging out on the end, so with this you can just tell the last one to have no border.
So you might do something like this, which sets your border on the left of every ul li a and removes it off of the last a in your list.
ul li a { display:block; padding: 0 10px; border-right: 1px solid #fff;}
ul > li:last-child a { border-right:none; }
Anyway, all is well until you check your other browsers and realize that, you guessed it, Internet Explorer (the bane of every front-end web developer), even the beloved IE8, does not support many of the new CSS3 specs and pseudo classes, including :last-child.
However, thankfully, this one is not too hard to work around. Most applications of :last-child can also be done with :first-child, which is supported by IE8. You basically just have to swap sides – so that border we originally added to the right, we add to the left, and then set :first-child to border-left: none;.
ul li a { display:block; padding: 0 10px; border-left: 1px solid #fff; }
ul > li:first-child a { border-left: none; }
Cameron Lockey 