So you're working on styling a list of elements that have borders between them. Of course everyone knows to style said list of elements you can just apply a border-bottom property in your CSS and then remove the very last elements border with li:last-child and set the border-bottom to none.

But does everybody also know that the browser compatibility for :last-child is lacking in everyone's favorite Microsoft browser past version 9? That's right.

Well thanks to my esteemed colleague Doug-E-Fresh, I learned a great workaround that extends browser compatibility all the way back to IE7.

The Hack

Okay, so it's not really a hack, but kindof. It's more of a work-around really. What you need to do is use the :first-child selecter instead of the :last-child selector. Why? Because IE supports :first-child all the way back to IE7. Why they didn't add support for :last-child until IE9 is beyond me, but that's the reality of it.

Then you've just got to reverse your styles a bit to accomodate for :first-child overwritting. Instead of the border-bottom rule, you'll use border-top and then reset that value to none with your li:first-child selector.

Boom. That just happened.