web-dev-qa-db-fra.com

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

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

Est-il possible d’obtenir le deuxième ou le troisième enfant en utilisant CSS?

htmlcsscss3css-selectors
267
Satch3000

Pour les navigateurs modernes, utilisez td:nth-child(2) pour le deuxième td et td:nth-child(3) pour le troisième. Rappelez-vous que ceux-ci récupèrent les deuxième et troisième td pour chaque ligne .

Si vous avez besoin de compatibilité avec IE antérieure à la version 9, utilisez des combinateurs de même niveau ou JavaScript comme suggéré par Tim . Voir aussi ma réponse à cette question connexe pour une explication et une illustration de sa méthode.

395
BoltClock

Pour IE 7 & 8 (et les autres navigateurs sans support de CSS3 ne comprenant pas IE6), vous pouvez utiliser les éléments suivants pour obtenir les 2ème et 3ème enfants:

2ème enfant:

td:first-child + td

3ème enfant:

td:first-child + td + td

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

Si vous voulez supporter IE6, vous pouvez le faire aussi! Vous devez simplement 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 souhaitées:

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