Pilih semua 'tr' kecuali yang pertama

257

Bagaimana saya bisa memilih semua trelemen kecuali yang pertama trdalam tabel dengan CSS?

Saya mencoba menggunakan metode ini , tetapi ternyata tidak berhasil.

css css-selectors

— Alexander Abakumov
sumber

1

Peramban apa yang dibutuhkan agar kompatibel?

— Pekka

w3schools.com/CSS/css_pseudo_classes.asp

— Badr Hari

Pertanyaan @ Pekka penting, karena saya tidak bisa memikirkan cara untuk melakukan ini menggunakan standar CSS yang akan bekerja dengan berbagai versi IE. Jika Anda perlu mendukung IE, satu-satunya solusi yang bisa diterapkan adalah kelas untuk kelas pertama <tr>dan berbeda untuk kelas lainnya.

— Spudley

saya tidak khawatir tentang IE tetapi akan bekerja di FF dan GC

466

Dengan menambahkan kelas ke s pertama tratau berikutnya tr. Tidak ada cara crossbrowser memilih baris yang Anda inginkan dengan CSS saja.

Namun, jika Anda tidak peduli dengan Internet Explorer 6, 7 atau 8:

tr:not(:first-child) {
    color: red;
}

— Magnar
sumber

18

Saya juga ingin menunjukkan tr:not(:first-of-type)sebagai solusi potensial juga, jika Anda mencari contoh pertama dari pemilih tertentu daripada anak umum pertama.

— Joshua Burns

2

Saya pikir pada tahun 2019 kita selesai dengan IE (kurang dari 0,5% pengguna IE6 ke IE10

— Webwoman

227

Saya terkejut tidak ada yang menyebutkan penggunaan combinator saudara, yang didukung oleh IE7 dan yang lebih baru:

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

Keduanya berfungsi dengan cara yang persis sama (dalam konteks tabel HTML):

tr:not(:first-child)

— BoltClock
sumber

1

Tunggu ... bagaimana ini bisa menjadi jawaban yang diterima? Anda tidak bisa mendapatkan "semua kecuali yang pertama" dari pernyataan itu, yang diminta OP. tr + tr akan memberi Anda satu elemen. Saya kira tr ~ tr akan membuat Anda semua (saya kira sesuatu seperti orang tua: anak pertama ~ tr), tetapi tidak secara sintaksis dapat dibaca dengan cara yang tidak:

— hairbo

5

@hairbo: tr + tr akan memberi Anda tr apa pun yang langsung mengikuti tr lainnya. Jika Anda memiliki tabel dengan tiga baris, baris ketiga langsung mengikuti baris kedua, jadi itu juga akan cocok. Anda hanya akan mendapatkan satu elemen jika Anda menggunakan tr: first-child + tr sebagai gantinya. Satu-satunya perbedaan antara + dan ~ adalah bahwa ~ mengizinkan sejumlah elemen lain di antara keduanya.

— BoltClock

Hanya ingin menambahkan, elem + elemadalah solusi umum yang bagus untuk ketika elemen yang ingin Anda targetkan bukan hanya anak-anak. Misalnya, jika a <h2>diikuti oleh beberapa <p>tag, yang pertama <p>bukan anak pertama dalam kasus itu.

— DisgruntledGoat

27

solusi ideal tetapi tidak didukung di IE

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

Solusi kedua adalah menata semua tr's dan kemudian menimpanya dengan css untuk anak pertama:

tr {css}
tr:first-child {override css above}

— Tandai Steggles
sumber

10

kedengarannya seperti 'baris pertama' yang sedang Anda bicarakan adalah header-tabel Anda - jadi Anda benar-benar harus memikirkan untuk menggunakan theaddan tbodydalam markup Anda ( klik di sini ) yang akan menghasilkan markup 'lebih baik' (semantik benar, berguna untuk hal-hal seperti pembaca layar ) dan kemungkinan yang lebih mudah, lintas-browser-ramah untuk pemilihan css ( table thead ... { ... })

— oezi
sumber

3

Meskipun pertanyaannya sudah memiliki jawaban yang layak, saya hanya ingin menekankan bahwa :first-childlabelnya bertipe item yang mewakili anak-anak.

Misalnya, dalam kode:

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

Jika Anda ingin memengaruhi hanya dua elemen kedua dengan margin, tetapi bukan yang pertama, Anda harus:

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

yaitu, karena inputs adalah anak-anak, Anda akan menempatkan first-childpada bagian input pemilih.

— CodyBugstein
sumber

1

Maaf saya tahu ini sudah tua tetapi mengapa tidak gaya semua elemen tr seperti yang Anda inginkan semua kecuali yang pertama dan penggunaan kelas psuedo: anak pertama di mana Anda mencabut apa yang Anda tentukan untuk semua elemen tr.

Lebih baik dijelaskan dengan contoh ini:

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

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

/ Patrik

— Patrik
sumber

1

Karena tr:not(:first-child)tidak didukung oleh IE 6, 7, 8. Anda dapat menggunakan bantuan jQuery. Anda dapat menemukannya di sini

— Tapos
sumber

1

Pilihan lain:

tr:nth-child(n + 2) {
    /* properties */
}

— Arman Yeghiazaryan
sumber

0

Mungkin seseorang bisa mendapat manfaat, berikut ini yang saya gunakan

ol li:not(:first-child) {
    background: black;
    color: white;
}

— Kokkonda Abhilash
sumber

-1

Anda juga bisa menggunakan pemilih kelas pseudo di CSS Anda seperti ini:

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

Itu tidak akan menerapkan kelas ke elemen pertama dengan kelas .desc.

Berikut ini JSFiddle dengan sebuah contoh: http://jsfiddle.net/YYTFT/ , dan ini adalah sumber yang bagus untuk menjelaskan pemilih kelas pseudo: http://css-tricks.com/pseudo-class-selectors/

— James
sumber

1

Ini tidak akan menerapkan gaya ke elemen pertama, titik. first-childmengabaikan kelas.

— Fez Vrasta

-3

Anda bisa membuat kelas dan menggunakan kelas ketika Anda menentukan semua masa depan Anda bahwa Anda ingin (atau tidak ingin) dipilih oleh CSS.

Ini akan dilakukan dengan menulis

<tr class="unselected">

dan kemudian di css Anda memiliki garis (dan menggunakan perintah text-align sebagai contoh):

unselected {
  text-align:center;
}



selected {
  text-align:right;
}

— pengguna476033
sumber

2

permohonan memahami Pertanyaan sebelum menjawab

— Ammar Bozorgvar