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

270

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?

Satch3000
fonte

Respostas:

398

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.

BoltClock
fonte
19
Não esqueça que isso funciona apenas com seletores CSS 3 (em outras palavras, não nas versões do IE anteriores à 9).
zneak
2
Como uma solução geral, 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.
CJ Dennis
232

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*/ }
Tim
fonte
19
Obrigado pela dica do IE7 / 8. Funciona bem.
Brendon Crawford
2
Você pode pegar os seletores CSS3 na minha resposta ou os seletores CSS2 na sua e soltá-los no jQuery e eles funcionarão naturalmente no IE6. Não há necessidade de pular todos esses bastidores extras para adicionar as classes.
BoltClock