When I work with lists in my HTML I usually will use a combination of padding/margin-right (if stacked horizontally) and padding/margin-bottom (if stacked vertically). In many cases I will then have to go and set up li:last-child in my CSS to remove the padding/margin from the last item in the list. When testing in IE7/8 I realized that they did not support the :last-child pseudo selector. To fix this I went and threw a class=”last” to all the last elements of a set to fix the issue, hoping that IE would eventually implement the selector and I could remove the classes.
Recently I found that IE7/8 does support the :first-child selector, so I’ve now started using padding/margin-top and padding/margin-left instead. This prevents me from having to bloat my code with needless classes, and in the end I still get the same final result. It forces me to think about things a little differently while I’m coding because I feel like I’m styling them backwards (:last-child always felt more natural to me), but it works across more browsers which is always a plus. I’m not entirely sure why Microsoft chose to support one and not the other, seems like a pretty bizarre choice. I could make a joke about fictitious monsters demanding the first child, but that wouldn’t be very professional of me, so I won’t.
Hopefully I’m not the only bonehead who didn’t realize this sooner, and maybe this post could help some others.