Respuestas:
Para navegadores modernos, use td:nth-child(2) para el segundo tdy td:nth-child(3)para el tercero. Recuerde que estos recuperan el segundo y el tercero td para cada fila .
Si necesita compatibilidad con IE anterior a la versión 9, use combinadores 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.
td:nth-of-type(3)es mejor. td:nth-child(3)coincidirá con un elemento que es tanto una td y el tercer hijo de su padre, independientemente de los tipos de elementos de sus dos hermanos anteriores . td:nth-of-type(3)obtendrá el tercero td, independientemente de la cantidad de tdelementos no anteriores . Si no hay tdelementos no anteriores al que desea, ambos selectores coincidirán con lo mismo.
Para IE 7 y 8 (y otros navegadores sin soporte CSS3 sin incluir IE6) puede usar lo siguiente para obtener el segundo y tercer hijo:
2do niño:
td:first-child + td3er niño:
td:first-child + td + tdLuego, simplemente agregue otro + tdpor cada hijo adicional que desee seleccionar.
Si quieres soportar IE6, ¡eso también se puede hacer! Simplemente necesita usar un pequeño 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*/ }