Wie kann ich mit CSS ein Kind mit einer bestimmten Nummer erhalten?

Ich habe eine, tablederen tds dynamisch erstellt werden. Ich weiß, wie man das erste und letzte Kind bekommt, aber meine Frage ist:

Gibt es eine Möglichkeit, das zweite oder dritte Kind mit CSS zu erreichen?

Verwenden Sie td:nth-child(2)für moderne Browser den zweiten tdund td:nth-child(3)den dritten Browser . Denken Sie daran, dass diese td für jede Zeile die zweite und dritte abrufen .

Wenn Sie Kompatibilität mit IE benötigen, die älter als Version 9 ist, verwenden Sie Geschwisterkombinatoren oder JavaScript, wie von Tim vorgeschlagen . Siehe auch meine Antwort auf diese verwandte Frage für eine Erklärung und Illustration seiner Methode.

Für IE 7 & 8 (und andere Browser ohne CSS3-Unterstützung ohne IE6) können Sie Folgendes verwenden, um das 2. und 3. Kind zu erhalten:

2. Kind:

td:first-child + td

3. Kind:

td:first-child + td + td

Fügen Sie dann einfach ein weiteres + tdfür jedes weitere Kind hinzu, das Sie auswählen möchten.

Wenn Sie IE6 unterstützen möchten, können Sie dies auch tun! Sie müssen lediglich ein wenig Javascript verwenden (in diesem Beispiel jQuery):

$(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");
    });
});

Dann verwenden Sie in Ihrem CSS einfach diese Klassenselektoren, um die gewünschten Änderungen vorzunehmen:

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