Wybierz wszystkie „tr” oprócz pierwszego

257

Jak mogę wybrać wszystkie trelementy oprócz pierwszego trw tabeli z CSS?

Próbowałem użyć tej metody, ale okazało się, że nie działa.

Aleksander Abakumow
źródło
1
Jakie przeglądarki muszą być kompatybilne?
Pekka
Pytanie Pekki jest ważne, ponieważ nie mogę wymyślić żadnego sposobu, aby to zrobić za pomocą standardowego CSS, który będzie działał z różnymi wersjami IE. Jeśli potrzebujesz obsługi IE, jedynym wykonalnym rozwiązaniem jest klasa dla pierwszej <tr>i inna klasa dla pozostałych.
Spudley,
nie martwię się o IE, ale zadziała w FF i GC

Odpowiedzi:

466

Dodając klasę do pierwszego trlub kolejnych trs. Nie ma żadnej metody wybierania wierszy, które chcesz za pomocą samego CSS.

Jeśli jednak nie obchodzi Cię Internet Explorer 6, 7 lub 8:

tr:not(:first-child) {
    color: red;
}
Magnar
źródło
18
Chciałbym również wskazać tr:not(:first-of-type)jako potencjalne rozwiązanie, jeśli szukasz pierwszego wystąpienia określonego selektora, a nie pierwszego uogólnionego dziecka.
Joshua Burns
2
Myślę, że w 2019 roku skończyliśmy z IE (mniej niż 0,5% użytkowników IE6 do IE10
Webwoman
227

Dziwię się, że nikt nie wspominał o użyciu kombinatorów rodzeństwa, które są obsługiwane przez IE7 i nowsze wersje:

tr + tr /* CSS2, adjacent sibling */
tr ~ tr /* CSS3, general sibling */

Oba działają dokładnie tak samo (w każdym razie w kontekście tabel HTML) jak:

tr:not(:first-child)
BoltClock
źródło
1
Zaraz ... jak to powinna być zaakceptowana odpowiedź? Nie można uzyskać „wszystkiego oprócz pierwszego” z tego oświadczenia, o które prosi OP. tr + tr da ci pojedynczy element. Myślę, że tr ~ tr dostanie was wszystkich (chyba coś w rodzaju rodzica: first-child ~ tr), ale nie w tak składniowo czytelny sposób, jak nie:
hairbo
5
@ włos: tr + tr da ci dowolny tr, który bezpośrednio następuje po innym tr. Jeśli masz tabelę z trzema rzędami, trzeci rząd znajduje się bezpośrednio za drugim rzędem, więc również będzie pasował. Otrzymasz tylko jeden element, jeśli zamiast tego użyjesz tr: first-child + tr. Jedyna różnica między znakami + i ~ polega na tym, że ~ pozwala na dowolną liczbę innych elementów pomiędzy dwoma wymienionymi.
BoltClock
Właśnie chciałem dodać, elem + elemto świetne ogólne rozwiązanie, gdy elementy, na które chcesz kierować, nie są jedynymi dziećmi. Na przykład jeśli po a <h2>następuje kilka <p>tagów, pierwszy <p>nie jest w tym przypadku pierwszym dzieckiem.
DisgruntledGoat
27

idealne rozwiązanie, ale nie obsługiwane w IE

tr:not(:first-child) {css}

drugim rozwiązaniem byłoby nadanie stylu wszystkim trom, a następnie zastąpienie css dla pierwszego dziecka:

tr {css}
tr:first-child {override css above}
Mark Steggles
źródło
10

brzmi jak „pierwsza linia”, o której mówisz, to nagłówek tabeli - więc naprawdę powinieneś pomyśleć o użyciu theadi tbodyw swoim znaczniku ( kliknij tutaj ), co spowodowałoby „lepsze” znaczniki (semantycznie poprawne, przydatne do rzeczy takich jak czytniki ekranu ) i łatwiejsze, przyjazne dla różnych przeglądarek możliwości wyboru css ( table thead ... { ... })

oezi
źródło
3

Chociaż pytanie ma już przyzwoitą odpowiedź, chcę tylko podkreślić, że :first-childtag pasuje do typu elementu reprezentującego dzieci.

Na przykład w kodzie:

<div id"someDiv">
     <input id="someInput1" /> 
     <input id="someInput2" />
     <input id="someInput2" />
</div

Jeśli chcesz wpływać tylko na dwa pozostałe elementy z marginesem, ale nie na pierwszy, zrobiłbyś:

#someDiv > input {
     margin-top: 20px;
}
#someDiv > input:first-child{
     margin-top: 0px;
}

to znaczy, ponieważ inputs są dziećmi, umieściłbyś first-childw wejściowej części selektora.

CodyBugstein
źródło
1

Przykro mi, wiem, że to stare, ale dlaczego nie nadać stylu wszystkim elementom tr tak, jak chcesz, z wyjątkiem pierwszej i użyć klasy psuedo: first-child, w której odwołujesz to, co określiłeś dla wszystkich elementów tr.

Lepiej opisany w tym przykładzie:

http://jsfiddle.net/DWTr7/1/

tr {
    border-top: 1px solid;
}
tr:first-child {
    border-top: none;   
}

/ Patrik

Patrik
źródło
1

Ponieważ tr:not(:first-child)nie jest obsługiwany przez IE 6, 7, 8. Możesz skorzystać z pomocy jQuery. Możesz go znaleźć tutaj

Tapos
źródło
1

Inna opcja:

tr:nth-child(n + 2) {
    /* properties */
}
Arman Yeghiazaryan
źródło
0

Może ktoś może skorzystać, poniżej jest to, czego użyłem

ol li:not(:first-child) {
    background: black;
    color: white;
}
Kokkonda Abhilash
źródło
-1

Możesz również użyć selektora pseudo klas w swoim CSS w następujący sposób:

.desc:not(:first-child) {
    display: none;
}

To nie zastosuje klasy do pierwszego elementu z klasą .desc.

Oto JSFiddle z przykładem: http://jsfiddle.net/YYTFT/ , i jest to dobre źródło do wyjaśnienia selektorów pseudoklas: http://css-tricks.com/pseudo-class-selectors/

James
źródło
1
To nie zastosuje stylu do pierwszego elementu, punkt. first-childignoruje klasy.
Fez Vrasta,
-3

Możesz stworzyć klasę i korzystać z niej, gdy zdefiniujesz wszystkie swoje przyszłe wybory, które chcesz (lub nie chcesz) wybierać za pomocą CSS.

Dokonałoby się tego pisząc

<tr class="unselected">

a następnie w twoim css posiadającym linie (i przykładowo wykorzystując polecenie wyrównania tekstu):

unselected {
  text-align:center;
}



selected {
  text-align:right;
}
użytkownik476033
źródło
2
zarzuty rozumieją pytanie przed udzieleniem odpowiedzi
Ammar Bozorgvar,