One of the features of the more current versions of CSS is the :nth-child pseudo-class. Suppose you have an element with a designated class that repeats on your web page. And suppose you want to specify specific instances of them uniquely. nth-child is heaven-sent for this sort of application.

For the purposes of this discussion, I’m going to pretend that I’m formatting a page with a list of accounts, generated in an unordered list, with each list item having a class of “account” assigned.

Our example requirements are these:

• The first item in the list should be styled on bold.
• The third item in the list should be presented with a green font. (I can’t imagine why a company would want this particular example, but it will demonstrate the functionality.)
• Every other item should have its background shaded a light gray, to help distinguish list items.
• Every fourth item should be bordered by a dark blue box.

We will start with this list:

View Source

In order to format the first item in the list in bold font, we add this instruction to our style:

“.account” shows the class we’re modifying. “:nth-child” is the pseudo-0class that specifies the style instruction for only a subset of elements with that class. And simply, “(1)” means to style the first element.

This gives us the list updated as,

View Source

Now let’s use that same kind of thing to turn the third list item green. Add this to the style instructions.

And that give us the document as shown here.

View Source

We can also use the words “even” and “odd” for formatting on every other element. To add our gray backgrounds, we add,

Which gives us the document formatted as,

View Source

Finally, we can use formulas with the variable “n” to specify even more complicated patterns. To but a blue box around every fourth entry, we write,

View Source

Here, we use a formula, and just apply some simple algebra. Start counting with n = 1, and every time the page hits a value that applies here, it will apply that value. The only tricky thing is that the page starts with zero for the first element, one for the second, etc.

This is where you want to get creative. For example, if you want to format the first three items on a list, you could do something like,

In this case, after n gets to 3, the value goes to zero (and then to negative numbers), so the formatting no longer applies.

Browser Compatibility, Especially IE

The main reason to not use this over the past several years has been browser compatibility. Most importantly Internet Explorer only has full support for the pseudo-class in IE9. And even then, there’s a confusing catch for developers.

IE9 defaults to compatibility mode for looking at local files. Compatibility mode equals ‘render stuff the old way,’ and I can’t imagine why that would be the default. No doubt, countless developers have beat their heads into their desks wondering why they couldn’t get their page formatting to work in IE, even though IE9 is supposed to handle this just fine.

To resolve,click on Tools -> ‘Compatibility View settings’ on the IE menu and then unclick the check box that says ‘Display internet sites in Compatibility View’. Then, you can quit blaming your code for a silly browser setting that says to generate some content one way and other content in a completely different way.

Fortunately, the default settings make it work like you want it to for your users — who are getting the content from a web site instead of from a local instance.

Still, it might be worth waiting on this, until the amount of traffic from Internet Explorer versions earlier than 9 goes down. Keep an eye on your user agent stats, and judge for yourself when it’s safe to implement.