html - child - ¿Cómo puedo obtener un número específico de niños usando CSS?

css selectores

Question

Tengo una table cuyos 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?

Answer 1

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

2do hijo:

td:first-child + td

3er hijo:

td:first-child + td + td

Luego, simplemente agregue otra + td por cada niño adicional que desee seleccionar.

Si quieres soportar IE6 eso también se puede hacer! Simplemente necesitas 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 los cambios que desee:

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

Answer 2

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

Si necesita compatibilidad con IE anterior a la versión 9, use combinadores de 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.