Skip to main content

Posts

Showing posts from August, 2012

Imitate :nth-child(x) in IE 8

I ran into the situation today where I wanted to use :nth-child(x), but this won't work in IE8. Since the majority of our user base is still using IE8, I had to address this issue. If you don't want to use a separate class for each one, there is a solution. first-child nth-child(2) nth-child(3) ​ li a{color:#fff;} li:first-child a{ background:#333; } /* :first-child is supported */ li:first-child + li a{background:#666; } /* :nth-child(2) */ li:first-child + li + li a{background:#999; } /* :nth-child(3) */​ See for yourself: This obviously is not a solution for cases like :nth-child(odd) but it's a nice way to handle cases where you want to control an element based on a specific sibling distance from the first child, such as centering the text of the second column in a table.

Animating Pseudo Elements in CSS

I just ran into a case where I wanted to animate a:after using CSS transitions, and found out that it is only supported in Firefox 4+. So I turned to modernizr for a test case, but didn't see one. Just as I'm debating whether or not I'm good enough to give it a go, I find that a bug has already been logged for it, and a pretty good solution is already in the works . Even though it's not official, it's better than what I had, so I figured I'd throw it in. Kudos to the Modernizr team and all who have contributed!