How can I get a specific number child using CSS?

Question

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?

Answer 1

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

For 2nd Child, use this:

td:first-child + td

For 3rd Child, use this:

td:first-child + td + td

Now, simply you can add another + td for each additional child you wish to select.

But, If you want to support IE6 that can be done too! You just need to use a little javascript like this:

$(function() {

    $('td:first-child').addClass("firstChild");

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

        $(this).find('td:eq(1)').addClass("secondChild");

        $(this).find('td:eq(2)').addClass("thirdChild");

    });

});

Then for your CSS you just need to 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*/ }