athe.la blog

I just read a great article on css-tricks about how the nth-child selector works.  What really shone out to me was the use of using a negative n value plus a number as in, ‘-n+5′.  What this would do is only select the top 5 rows!  This is very clever and I’m definitely going to be using this in the future.

A practical use of this technique is to imagine a high score table with lots of rows each detailing a person’s high score.  You want to highlight the top three to indicate that these people are the ones to be commended and enlarge the top scorer to emphasise their achievement.  You would use this css:

table#highscores tr td {
    background-color: #666; /* default values */
    height: 20px;
}

table#highscores tr:first-child td {
    height: 40px; /* increase the row height of the top scorer */
}

table#highscores tr:nth-child(-n+3) td {
    background-color: #889; /* emphasise the top three */
}

Unforunately and unsurprisingly, this doesn't work in the most popular* browser in the world, Internet Explorer 8 and below.  For those, you'll have to use jQuery and its implementation of nth-child.  Like what was mentioned in the article on css-tricks though, this technique shouldn't really be used for fundamental website design where the layout or usability would be effected by it not being implemented.  Allowing the website to degrade gracefully for browsers with no implementation is key.

* By most popular, I really mean most widely-used.  I doubt that a large proportion of the internet population are using IE8 because they actually prefer IE8 to other browsers or they wouldn't switch if they had the opportunity, such as business users whose systems are locked down