¿Cómo puedo obtener un número específico de niño usando CSS?

Tengo un tablecuyos tds se crean dinámicamente. Sé cómo obtener el primer y el último hijo, pero mi pregunta es:

¿Hay alguna manera de hacer que el segundo o tercer hijo use CSS?

Para navegadores modernos, use td:nth-child(2) para el segundo tdy td:nth-child(3)para el tercero. Recuerde que estos recuperan el segundo y el tercero td para cada fila .

Si necesita compatibilidad con IE anterior a la versión 9, use combinadores hermanos o JavaScript como lo sugiere Tim . También vea mi respuesta a esta pregunta relacionada para obtener una explicación e ilustración de su método.

Para IE 7 y 8 (y otros navegadores sin soporte CSS3 sin incluir IE6) puede usar lo siguiente para obtener el segundo y tercer hijo:

2do niño:

td:first-child + td

3er niño:

td:first-child + td + td

Luego, simplemente agregue otro + tdpor cada hijo adicional que desee seleccionar.

Si quieres soportar IE6, ¡eso también se puede hacer! Simplemente necesita usar un pequeño javascript (jQuery en este ejemplo):

$(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");
    });
});

Luego, en su CSS, simplemente use esos selectores de clase para hacer los cambios que desee:

table td.firstChild { /*stuff here*/ }
table td.secondChild { /*stuff to apply to second td in each row*/ }