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
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.
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
Boom. That just happened.