Comment puis-je obtenir un numéro enfant spécifique en utilisant CSS?

J'ai un tabledont les tds sont créés dynamiquement. Je sais comment obtenir le premier et le dernier enfant mais ma question est:

Existe-t-il un moyen d'obtenir le deuxième ou le troisième enfant en utilisant CSS?

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.

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 + td

3e enfant:

td:first-child + td + td

Ensuite, 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*/ }