0 votes
1 view
in Web Technology by (22.4k points)

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?

1 Answer

0 votes
by (40.3k points)

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*/ }

Welcome to Intellipaat Community. Get your technical queries answered by top developers !


Categories

...