Respostas:
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.
td:nth-of-type(3)é melhor. td:nth-child(3)irá corresponder a um elemento que é tanto um td e o terceiro filho de seu pai, independentemente dos tipos de elementos de seus dois irmãos anteriores . td:nth-of-type(3)receberá o terceiro td, independentemente de quantos tdelementos não existam antes dele . Se não houver tdelementos antes do que você deseja, os dois seletores corresponderão à mesma coisa.
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 + td3º Filho:
td:first-child + td + tdEm 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*/ }