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


270

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?

Réponses:


398

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.


19
N'oubliez pas que cela ne fonctionne qu'avec les sélecteurs CSS 3 (en d'autres termes, pas dans les versions d'IE antérieures à 9).
zneak


2
En tant que solution générale, 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.
CJ Dennis

232

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

19
Merci pour l'astuce IE7 / 8. Fonctionne très bien.
Brendon Crawford

2
Vous pouvez prendre les sélecteurs CSS3 dans ma réponse ou les sélecteurs CSS2 dans la vôtre et les déposer directement dans jQuery et ils fonctionneront naturellement dans IE6. Pas besoin de sauter à travers tous ces cerceaux supplémentaires pour ajouter les classes.
BoltClock
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.