Nggunakake: nth-of-type (n) Kanthi Tabel
Kanggo nggawe tabel luwih gampang kanggo maca, asring mbiyantu kanggo baris gaya kanthi werna-werna latar mburi. Salah siji cara paling biasa kanggo tabel gaya yaiku nyetel werna latar mburi saben baris liyane. Iki asring diarani minangka "zebra stripes."
Sampeyan bisa ngrampungake iki kanthi nyetel saben baris liyane kanthi kelas CSS lan mbatesi gaya kanggo kelas kasebut. Iki dianggo nanging ora cara sing paling apik utawa paling efisien kanggo nggoleki.
Nalika nggunakake metode iki, saben-saben sampeyan kudu ngowahi tabel kasebut, sampeyan kudu ngowahi saben baris ing saben tabel kanggo njamin saben baris tetep konsisten karo owah-owahan. Contone, yen sampeyan nglebokake baris anyar menyang meja sampeyan, saben baris liyane ing sangisore kudu diganti kelas.
CSS ndadekake gampang kanggo nulis tabel kanthi zebra. Sampeyan ora perlu nambah atribut HTML ekstra utawa kelas CSS, sampeyan mung nggunakake: nth-of-type (n) CSS selector .
Nomer: nth-of-type (n) minangka pseudo-kelas struktural ing CSS sing ngidini sampeyan nemtokake gaya miturut hubungane karo wong tuwa lan unsur sali. Sampeyan bisa nggunakake aplikasi kasebut kanggo milih siji utawa luwih unsur miturut urutan sumber. Ing tembung liyane, bisa cocog karo saben unsur sing minangka anak nomer siji saka jinis tiyang sepah dhewe.
Huruf n bisa dadi tembung kunci (kayata ganjil utawa malah), nomer, utawa rumus.
Contone, kanggo nggandhengake saben tag paragraf liyane kanthi warna latar mburi kuning, dokumen CSS sampeyan kalebu:
p: nth-of-type (ganjil) {
latar mburi: kuning;
}
Mulai Kanthi Panjenengan Tabel HTML
Pisanan, gawe tabel sing bakal biasa nulis ing HTML. Aja nambah kelas khusus menyang baris utawa kolom.
Ing stylesheet sampeyan, nambah CSS ing ngisor iki:
tr: nth-of-type (ganjil) {
latar mburi-werna: #ccc;
}
Iki bakal ngetrap saben baris liyane kanthi werna latar werna abu-abu sing diwiwiti karo baris pisanan.
Gaya Alternatif Columns ing Way Sama
Sampeyan bisa nindakake macem-macem gaya kanggo kolom ing tabel. Kanggo nindakake, mung ngganti tr ing kelas CSS menyang td. Tuladhane:
td: nth-of-type (ganjil) {
latar mburi-werna: #ccc;
}
Nggunakake Rumus ing Selector nth-saka-tipe (n)
Sintaks kanggo rumus sing digunakake ing pemilih yaiku + b.
a iku nomer sing nggambar siklus utawa ukuran indeks.
n iku bener huruf "n" lan nggambarake sawijining counter, kang bintang ing 0.
+ minangka operator, sing uga "-"
b minangka integer lan nggambarake nilai offset-umpamane, carane akeh larik mudhun ngirim pemilih miwiti nglamar werna latar mburi. Iki perlu yen operator kalebu ing rumus.
Contone, yen sampeyan pengin nyetel werna latar mburi saben baris 3rd, rumus sampeyan bakal dadi 3n + 0. CSS sampeyan bisa katon kaya iki:
tr: nth-of-type (3n + 0) {
latar mburi: slategray;
}
Piranti sing dibiyantu kanggo Nggunakake Selector nth-saka-jinis
Yen sampeyan ngira sing sethithik kanthi aspek rumus nggunakake pseudo-class nth-of-type selector, nyoba: situs Tester Tester minangka alat migunani sing bisa mbantu nemtokake sintaks kanggo nggayuh tampilan sing dikarepake. Gunakake menu tarik-mudhun kanggo milih nth-of-type (sampeyan uga bisa ngetrapake kelas pseudo-liyane ing kene, kayata nth-anak).