HTML & CSS - - By Guy Routledge

AtoZ CSS Quick Tip: How to Use the nth-Child CSS Selector

This article is a part of our AtoZ CSS Series. You can find other entries to the series here.
You can view the full transcript and screencast for nth-child here.

Welcome to our AtoZ CSS series! In this series, I’ll be exploring different CSS values (and properties) each beginning with a different letter of the alphabet. We know that sometimes screencasts are just not enough, in this article we’ve added a new quick tip about nth-child for you.

N4-01

N is for nth-child

We have many powerful CSS selectors available for finding elements on the page and applying styling to them.

The nth-child pseudo selector is probably the most powerful due to the flexibility of its (an+b) expression for finding patterns of elements. This was discussed in detail in the video screencast all about nth-child.

In this quick tip, we’ll look at when you can use nth-child and when you should use a standard class.

When should I use nth-child?

This is a question I get asked by students quite frequently. The first thing to note is that (unfortunately) it depends on the situation. But I’ll try and provide some good baseline criteria.

Firstly, all the :nth-child like selectors are only supported in IE9 and above (with the exception of :first-child) so the first thing to check is the age of browser your project needs to support.

If you need to support IE8 (firstly, sorry to hear that!) then there’s really only one thing you can do; use classes or use :first-child.

Tip 1: Use :first-child when supporting IE8

Imagine you have a horizontal unordered list of nav links and your design needs to have a border to the right of each item – but not the last item.

Instead of adding the border on the right and needing to remove it from the last one, add the border on the left and remove it from the first one.

.site-nav li {
  border-left: 2px solid grey;
}
.site-nav li:first-child {
  border: 0;
}

You can use a similar trick for borders on top/bottom too.

If you’re lucky enough to not need support for IE8, read on…

Tip 2: Use :first-child and :last-child instead of classes

If you’re building or using a grid system and need to do something special for your first and last columns in a row, I’d favour using the :first-child and :last-child pseudo classes over adding classes like .first or .last direct in the HTML.

This will keep your HTML neater and means that you don’t have to think too much when crafting your layout. Layout can be sometimes difficult, so the less thinking you have to do about it the better.

Tip 3: Use :nth-child for alternating styles

A classic example of alternating styles would be having different colored backgrounds for even or odd rows in a table. Another could be floating even or odd blocks of content to the left and right side of a page or container – perhaps for a comment thread or message conversation.

For these kind of situations, I use :nth-child(odd) and :nth-child(even). To keep your code lean, you should just write the first state without any nth-child and then use the higher specificity of using nth-child to set up the alternate style.

/* do this */
.data-table tr {
  background: white;
}
.data-table tr:nth-child(even) {
  background: lightgrey;
}

/* not this */
.data-table tr:nth-child(odd) {
  background: white;
}
.data-table tr:nth-child(even) {
  background: lightgrey;
}

Tip 4: Avoid weird and complex nth-child expressions

For other, more complex selections of the page, I’d favor using classes directly in the HTML over confusing nth-child expressions.

li:nth-child(-n+3) or li:nth-child(5n+1):not(nth-child(3n-1)) are just a bit too crazy and take a lot of brain power to decipher what they actually means (Hint: I have no idea – I just made the last one up, although technically it could work!)

Unfortunately, some designs are so complex that often an approach like this feels necessary but imagine coming back to this kind of code months later and trying to work out what you were trying to do – it could take a while even for the most competent of CSS experts!

Tip 5: Use nth-child when you can’t control the HTML

This may sound like an odd statement. Surely, as the developer or designer one of our most important jobs is to control the HTML.

The situation I’m talking about here is when you’re dealing with a content management system.

When building templates for a CMS based website, you’ll likely be able to control the HTML structure and add your classes and data attributes as and when needed. But sometimes your template will have a place where it spits out a whole load of content from a text field or text area from within the CMS. A classic example is WordPress’ the_content which is one big chunk of HTML which you may have little or no control over.

In these cases, the :first-child, :last-child and :nth-child selectors can get you out of a tight corner.

So, there you have it. 5 tips for using (or not using) one of the most powerful and flexible CSS selectors there is.

Sponsors