Como posso obter um filho de número específico usando CSS?

Eu tenho um tablecujos tdsão criados dinamicamente. Eu sei como obter o primeiro e o último filho, mas minha pergunta é:

Existe uma maneira de obter o segundo ou terceiro filho usando CSS?

Para navegadores modernos, use td:nth-child(2)para o segundo tde td:nth-child(3)para o terceiro. Lembre-se de que estes recuperam o segundo e o terceiro td para cada linha .

Se você precisar de compatibilidade com o IE anterior à versão 9, use combinadores irmãos ou JavaScript, conforme sugerido por Tim . Veja também minha resposta a esta pergunta relacionada para uma explicação e ilustração de seu método.

Para o IE 7 e 8 (e outros navegadores sem suporte a CSS3 que não incluem o IE6), você pode usar o seguinte para obter o segundo e o terceiro filhos:

2º Filho:

td:first-child + td

3º Filho:

td:first-child + td + td

Em seguida, basta adicionar outro + td para cada filho adicional que você deseja selecionar.

Se você deseja oferecer suporte ao IE6, isso também pode ser feito! Você simplesmente precisa usar um pouco de javascript (jQuery neste exemplo):

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

Em seu css, você simplesmente usa esses seletores de classe para fazer as alterações que desejar:

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