Menggunakan: n-of-type (n) Dengan Tables
Untuk membuat tabel lebih mudah dibaca, seringkali berguna untuk menata baris dengan warna latar bergantian. Salah satu cara paling umum untuk mengatur gaya tabel adalah dengan mengatur warna latar belakang setiap baris lainnya. Ini sering disebut sebagai "garis zebra."
Anda dapat mencapai ini dengan mengatur setiap baris lain dengan kelas CSS dan kemudian menentukan gaya untuk kelas itu. Ini berfungsi tetapi bukan cara terbaik atau paling efisien untuk melakukannya.
Ketika menggunakan metode ini, setiap kali Anda perlu mengedit tabel itu Anda mungkin harus mengedit setiap baris dalam tabel untuk memastikan setiap baris konsisten dengan perubahan. Misalnya, jika Anda memasukkan baris baru ke tabel Anda, setiap baris lain di bawahnya perlu ada kelas yang diubah.
CSS memudahkan untuk menata tabel dengan garis zebra. Anda tidak perlu menambahkan atribut HTML atau kelas CSS tambahan apa pun, Anda cukup menggunakan pemilih tipe nth-of-type (n).
The: n-of-type (n) selector adalah kelas pseudo struktural dalam CSS yang memungkinkan Anda untuk menata elemen berdasarkan hubungan mereka dengan elemen induk dan saudara kandung. Anda dapat menggunakannya untuk memilih satu atau beberapa elemen berdasarkan urutan sumbernya. Dengan kata lain, itu bisa cocok dengan setiap elemen yang merupakan anak ke-n dari tipe tertentu dari induknya.
Huruf n dapat berupa kata kunci (seperti ganjil atau genap), angka, atau rumus.
Misalnya, untuk menata setiap tag paragraf lainnya dengan warna latar belakang kuning, dokumen CSS Anda akan mencakup:
p: nth-of-type (tidak datar) {
latar belakang: kuning;
}
Mulai Dengan Tabel HTML Anda
Pertama, buat tabel Anda seperti yang biasanya Anda tulis dalam HTML. Jangan tambahkan kelas khusus ke baris atau kolom.
Di stylesheet Anda, tambahkan CSS berikut:
tr: nth-of-type (tidak datar) {
warna latar: #ccc;
}
Ini akan memberi gaya setiap baris lainnya dengan warna latar belakang abu-abu dimulai dengan baris pertama.
Kolom Alternatif Gaya dengan Cara yang Sama
Anda dapat melakukan gaya yang sama pada kolom di tabel Anda. Untuk melakukannya, cukup ubah tr di kelas CSS Anda ke td. Sebagai contoh:
td: nth-of-type (tidak datar) {
warna latar: #ccc;
}
Menggunakan Rumus dalam Pemilih n-of-type (n)
Sintaks untuk rumus yang digunakan dalam pemilih adalah + b.
a adalah angka yang mewakili ukuran siklus atau indeks.
n sebenarnya adalah huruf "n" dan mewakili sebuah counter, yang dibintangi pada 0.
+ adalah operator, yang mungkin juga "-"
b adalah bilangan bulat dan merepresentasikan nilai offset — misalnya, berapa baris yang harus dibuka pemilih untuk menerapkan warna latar belakang. Ini diperlukan jika operator termasuk dalam rumus.
Misalnya, jika Anda ingin mengatur warna latar belakang untuk setiap baris ketiga, rumus Anda akan menjadi 3n + 0. CSS Anda mungkin terlihat seperti ini:
tr: nth-of-type (3n + 0) {
latar belakang: slategray;
}
Alat yang Bermanfaat untuk Menggunakan Pemilih Tipe-ke-tipe
Jika Anda merasa sedikit gentar dengan aspek formula menggunakan pemilih tipe-pseudo-class, coba: nth Tester site sebagai alat yang berguna yang dapat membantu Anda menentukan sintaks untuk mencapai tampilan yang Anda inginkan. Gunakan menu dropdown untuk memilih tipe-n (Anda juga dapat bereksperimen dengan pseudo-class lain di sini, juga, seperti nth-child).