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

Question

J'ai une table dont les td 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 ?

Answer 1

Pour les navigateurs modernes, utilisez td:nth-child(2) pour le deuxième td, et td:nth-child(3) pour le troisième. N'oubliez pas que ces sélecteurs récupèrent le deuxième et le troisième td pour chaque ligne.

Si vous avez besoin de compatibilité avec IE plus ancien que la version 9, utilisez des combinateurs adjacents ou du JavaScript comme suggéré par Tim. Consultez également ma réponse à cette question connexe pour une explication et une illustration de sa méthode.

Answer 2

For IE 7 & 8 (et les autres navigateurs sans support CSS3, à l'exception d'IE6), vous pouvez utiliser ce qui suit pour obtenir le 2e et 3e enfants:

2e Enfant:

td:first-child + td

3e Enfant:

td:first-child + td + td

Ensuite, ajoutez simplement un autre + td pour chaque enfant supplémentaire que vous souhaitez sélectionner.

Si vous souhaitez prendre en charge IE6, c'est également possible ! Vous avez simplement besoin 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, utilisez simplement ces sélecteurs de classe pour apporter les modifications désirées:

table td.firstChild { /*contenu ici*/ }
table td.secondChild { /*contenu à appliquer au deuxième td de chaque ligne*/ }