:nth-child structural pseudo-class selectors

There are 4 pseudo-class expressions that are part of the :nth-child pseudo-class. Structural pseudo-class selectors target HTML elements based on the DOM tree. Basically, elements that cannot easily be targeted by simple selectors or combinations of selectors. What makes pseudo-classes so handy is the ability style elements dynamically based on its position in the DOM.

1. :nth-of-type(N)
2. :nth-last-child(N)
3. :nth-child(N)
4. :nth-last-of-type(N)

:nth-of-type(N) selector

My favorite of the 4 is the :nth-of-type(N) selector. The nth-of-type selector allows you to select child elements of a parent based on the particular type of the element, for example every 5th "li" element in a list. You can select even or odd elements, or the nth (order number) child in the group of elements. The class accepts the argument "n" which can can be a keyword, a number, or strings "odd", "even", or an expression "-n+3".
Let's look at a simple but effective use of the nth-of-type selector. If for example you have a table of data that will be pulled from a database and the number of rows is not known before hand. You need to colorize or highlight every other row of the data. Here is our table:

 <table id="typeTableExample" border="1" width="400">
            <tr>
                <th>Name</th>
                <th>Address</th>
            </tr>
            <tr>
                <td>Fred</td>
                <td>1310 VM street</td>
            </tr>
            <tr>
                <td>Phil</td>
                <td>2600 s 3rd st</td>
            </tr>
            <tr>
                <td>John</td>
                <td>44 south Pine</td>
            </tr>
            <tr>
                <td>Chase</td>
                <td>26 second ave</td>
            </tr>
        </table>

Here is our non styled table.

Here we add the nth-of-type selector to the CSS which gives every odd row a background color of #fff and every even row a background color of #c3fdb8.

 
<style type="text/css">

#typeTableExample th{
    background: #ccc;
}

#typeTableExample tr:nth-of-type(odd){
    background: #fff;
}

#typeTableExample tr:nth-of-type(even){ 
    background: #c3fdb8;
}

#typeTableExample tr>td:first-of-type{ 
    font-weight: bold;
}

</style>

Here is our styled table.

In the above example we also added the "first-of-type" attribute to bold the text in the first instances of the "td" tag found that is a child of the "tr" element. The "first-of-type" is equivalent to :nth-of-type(1). The first-of-type matches the first child element of the specified element type.

:nth-last-child(N) selector

The nth-last-child(n) selector matches every element that is the nth child of its parent starting from the last element. Basically, matches elements of their positions within a parent element. Lets extend our table example to make the font color red for the last 3 items in the tabel.

<style type="text/css">

#typeTableExample th{
    background: #ccc;
}

#typeTableExample tr:nth-of-type(odd){
    background: #fff;
}

#typeTableExample tr:nth-of-type(even){ 
    background: #cfdbB8;
}

#typeTableExample tr>td:first-of-type{ 
    font-weight: bold;
}

#typeTableExample tr:nth-last-child(-n+3){
 color:#ff3300;
}

</style>
    

Here is our styled table.

:nth-child(N) selector

The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent. In our table example we now will make the first table row orange.

<style type="text/css">

#typeTableExample th{
    background: #ccc;
}

#typeTableExample tr:nth-of-type(odd){
    background: #fff;
}

#typeTableExample tr:nth-of-type(even){ 
    background: #c3fdb8;
}

#typeTableExample tr>td:first-of-type{ 
    font-weight: bold;
}

#typeTableExample tr:nth-last-child(-n+3){
 color:#ff3300;
}

#typeTableExample tr:nth-child(-n+2) {
 background:orange;
} 

</style>
 

Here is our styled table

:nth-last-of-type(N) selector

The :nth-last-of-type(n) selector matches every element that is the nth child, of a particular type, of its parent, counting from the last child. Here we will add a red background to the 2nd "li" element from the bottom.

<style type="text/css">

li:nth-last-of-type(2){
 background:#ff3300;
} 

</style>

<ul>
<li>First item.</li>
<li>Second item.</li>
<li>Third item.</li>
<li>Fourth item.</li>
</ul>

Here is our styled list

Known issues

Sadly, Internet Explorer (up until version 8) has no support for structural pseudo-classes. All other modern browsers Firefox, Safari, Chrome and Opera support pseudo-classes.
For IE browsers I would investigate a JavaScript support library such as Selectivizr http://selectivizr.com/ or YUI http://developer.yahoo.com/yui/selector/.
The Selectivizr utility library adds support for CSS3 pseudo-classes in IE. Keep in mind Selectivizr needs the strict mode DTD to work, if you are in Quirks mode you are out of luck. Additionally, the YUI library has JavaScript support for the Pseudo-classes selector syntax: var nodes = YAHOO.util.Selector.query('ul li:first-child');

For more information:

http://reference.sitepoint.com/css/understandingnthchildexpressions