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.