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

270

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?

Satch3000
quelle

Antworten:

398

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.

BoltClock
quelle
19
Vergessen Sie nicht, dass dies nur mit CSS 3-Selektoren funktioniert (mit anderen Worten, nicht in IE-Versionen vor 9).
Zneak
2
Als allgemeine Lösung td:nth-of-type(3)ist besser. td:nth-child(3)wird mit einem Element übereinstimmen, das sowohl ein td als auch das dritte Kind seines Elternteils ist, unabhängig von den Elementtypen seiner beiden vorherigen Geschwister . td:nth-of-type(3)wird das dritte bekommen td, unabhängig davon, wie viele Nicht- tdElemente davor sind . Wenn tdvor dem gewünschten Element keine Nichtelemente vorhanden sind , stimmen beide Selektoren überein.
CJ Dennis
232

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*/ }
Tim
quelle
19
Vielen Dank für den IE7 / 8-Tipp. Funktioniert super.
Brendon Crawford
2
Sie können die CSS3-Selektoren in meiner Antwort oder die CSS2-Selektoren in Ihrer Antwort in jQuery ablegen und sie funktionieren natürlich in IE6. Sie müssen nicht durch all diese zusätzlichen Rahmen springen, um die Klassen hinzuzufügen.
BoltClock