Jak mogę uzyskać określony numer podrzędny za pomocą CSS?

270

Mam tableczyje tdsą tworzone dynamicznie. Wiem, jak zdobyć pierwsze i ostatnie dziecko, ale moje pytanie brzmi:

Czy istnieje sposób na uzyskanie drugiego lub trzeciego dziecka za pomocą CSS?

html css css-selectors Satch3000
źródło

Odpowiedzi:

398

W przypadku nowoczesnych przeglądarek użyj td:nth-child(2)dla drugiego tdi td:nth-child(3)trzeciego. Pamiętaj, że pobierają one drugi i trzeci td dla każdego wiersza .

Jeśli potrzebujesz zgodności z IE starszą niż wersja 9, użyj kombinacji rodzeństwa lub JavaScript, jak sugeruje Tim . Zobacz także moją odpowiedź na to pokrewne pytanie, aby uzyskać wyjaśnienie i ilustrację jego metody.

BoltClock
źródło
19
Nie zapominaj, że działa to tylko z selektorami CSS 3 (innymi słowy, nie w wersjach IE wcześniejszych niż 9).
zneak
1
Wkrótce troska o przeszłość ... Moje odczucia w tej sprawie .
Clarus Dignus
2
Jako ogólne rozwiązanie td:nth-of-type(3)jest lepsze. td:nth-child(3)dopasuje element, który jest zarówno td i trzecim dzieckiem swojego rodzica, niezależnie od rodzaju elementem jej dwóch poprzednich rodzeństwa . td:nth-of-type(3)dostanie trzeci td, bez względu na to, ile tdelementów przed nim jest . Jeśli tdprzed tym, którego chcesz, nie ma żadnych elementów, oba selektory będą pasować do tego samego.
CJ Dennis,
232

W przeglądarkach IE 7 i 8 (i innych przeglądarkach bez obsługi CSS3 bez IE6) możesz użyć następujących elementów, aby uzyskać 2. i 3. dziecko:

2. dziecko:

td:first-child + td

3. dziecko:

td:first-child + td + td

Następnie po prostu dodaj kolejne + tddla każdego dodatkowego dziecka, które chcesz wybrać.

Jeśli chcesz wesprzeć IE6, możesz to zrobić! Musisz po prostu użyć małego javascript (w tym przykładzie 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");
    });
});

Następnie w swoim css po prostu użyj tych selektorów klas, aby wprowadzić dowolne zmiany:

table td.firstChild { /*stuff here*/ }
table td.secondChild { /*stuff to apply to second td in each row*/ }
Tim
źródło
19
Dziękujemy za wskazówkę dotyczącą IE7 / 8. Działa świetnie.
Brendon Crawford,
2
Możesz wziąć selektory CSS3 w mojej odpowiedzi lub selektory CSS2 w swoim i upuścić je bezpośrednio do jQuery, a one będą działały naturalnie w IE6. Nie trzeba przeskakiwać przez te wszystkie dodatkowe obręcze, aby dodać klasy.
BoltClock