¿Cómo puedo obtener un número específico hijo usando CSS?

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

¿Hay alguna forma de obtener el segundo o tercer hijo usando CSS?

Author: Paulie_D, 2011-04-14
Source

2 answers

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

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

 385
Author: BoltClock,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:02:43

Para IE 7 & 8 (y otros navegadores sin soporte CSS3 que no incluyen IE6) puede usar lo siguiente para obtener los hijos 2 y 3:

Segundo hijo: 

td:first-child + td

3er Hijo: 

td:first-child + td + td

Luego simplemente agregue otro + td por cada hijo adicional que desee seleccionar.

Si desea apoyar IE6 que se puede hacer también! Simplemente necesita usar un poco de 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 cualquier cambio que te guste: 

table td.firstChild { /*stuff here*/ }
table td.secondChild { /*stuff to apply to second td in each row*/ }
 229
Author: Tim,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-12-15 16:14:36