Réponses:
Pour les navigateurs modernes, utilisez td:nth-child(2)le second tdet td:nth-child(3)le troisième. N'oubliez pas que ceux-ci récupèrent les deuxième et troisième td pour chaque ligne .
Si vous avez besoin d'une compatibilité avec IE antérieure à la version 9, utilisez des combinateurs frères ou JavaScript comme suggéré par Tim . Voir également ma réponse à cette question connexe pour une explication et une illustration de sa méthode.
td:nth-of-type(3)c'est mieux. td:nth-child(3)correspondra à un élément qui est à la fois un td et le troisième enfant de son parent, quels que soient les types d'élément de ses deux frères et sœurs précédents . td:nth-of-type(3)obtiendra le troisième td, quel que soit le nombre de non- tdéléments qui le précèdent . S'il n'y a pas de non- tdéléments avant celui que vous voulez, les deux sélecteurs correspondront à la même chose.
Pour IE 7 et 8 (et les autres navigateurs sans prise en charge CSS3 n'incluant pas IE6), vous pouvez utiliser les éléments suivants pour obtenir les 2e et 3e enfants:
2ème enfant:
td:first-child + td3e enfant:
td:first-child + td + tdEnsuite, ajoutez simplement un autre + tdpour chaque enfant supplémentaire que vous souhaitez sélectionner.
Si vous souhaitez prendre en charge IE6, cela peut aussi être fait! Il vous suffit d'utiliser un peu de javascript (jQuery dans cet exemple):
$(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");
});
});Ensuite, dans votre CSS, vous utilisez simplement ces sélecteurs de classe pour apporter les modifications que vous souhaitez:
table td.firstChild { /*stuff here*/ }
table td.secondChild { /*stuff to apply to second td in each row*/ }