267 votos

¿Cómo puedo obtener el segundo hijo usando CSS?

Tengo un table cuyas td s se crean dinámicamente. Yo sé cómo conseguir el primer y último hijo, pero mi pregunta es:

¿Hay una manera de conseguir el segundo o tercer hijo usando CSS?

395voto

BoltClock Puntos 249668

Para navegadores modernos, el uso td:nth-child(2) para el segundo tdy td:nth-child(3) para el tercero. Recuerda que estas recuperar el segundo y tercer td para cada fila.

Si necesita compatibilidad con IE mayores de la versión 9, uso hermano de combinadores o JavaScript como sugerido por Tim. También ver mi respuesta a esta pregunta relacionada con una explicación e ilustración de su método.

230voto

Tim Puntos 3254

Para IE 7 y 8 (y otros navegadores sin soporte CSS3 no incluyendo IE6) usted puede usar las siguientes opciones para obtener la 2ª y la 3ª a los niños:

2º Niño:

td:first-child + td

3er Niño:

td:first-child + td + td

A continuación, basta con añadir otro + td adicional por cada niño que desea seleccionar.

Si usted desea apoyar a IE6 que se puede hacer demasiado! Solo tienes que 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");
    });
});

A continuación, en el código css de que usted sólo tiene que utilizar los selectores de clase para hacer los cambios que quieras:

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

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X