Take the 2-minute tour ×

I have a table whose tds are created dynamically. I know how to get the first and last child but my question is:

Is there a way of getting the second or third child using CSS?

share|improve this question
add comment

2 Answers

up vote 199 down vote accepted

For modern browsers, use td:nth-child(2) for the second td, and td:nth-child(3) for the third. Remember that these retrieve the second and third td for every row.

If you need compatibility with IE older than version 9, use sibling combinators or JavaScript as suggested by Tim. Also see my answer to this related question for an explanation and illustration of his method.

share|improve this answer
Don't forget that this works only with CSS 3 selectors (in other words, not in versions of IE prior to 9). –  zneak Apr 14 '11 at 14:31
add comment

For IE 7 & 8 (and other browsers without CSS3 support not including IE6) you can use the following to get the 2nd and 3rd children:

2nd Child:

td:first-child + td

3rd Child:

td:first-child + td + td

Then simply add another + td for each additional child you wish to select.

If you want to support IE6 that can be done too! You simply need to use a little javascript (jQuery in this example):

$(function() {
    $(".table-class tr").each(function() {

Then in your css you simply use those class selectors to make whatever changes you like:

table td.firstChild { /*stuff here*/ }
table td.secondChild { /*stuff to apply to second td in each row*/ }
share|improve this answer
Thank you for the IE7/8 tip. Works great. –  Brendon Crawford Dec 13 '11 at 21:26
You can take the CSS3 selectors in my answer or the CSS2 selectors in yours and drop them right into jQuery and they'll work naturally in IE6. No need to jump through all these extra hoops to add the classes. –  BoltClock Mar 21 '12 at 18:27
+1 I never know i can do something like td:first-child + td –  Moons Sep 17 '12 at 7:37
add comment

Your Answer


