Web Style Sheets
CSS tips & tricks

Status

Peringatan: pada saat pernulisan (Februari 2003), kebanyakan browsers tidak mendukung selektor 'nth-child'  (diperkenalkan pada November 2001) dan hanya sedikit yang mendukung elemen COL.

Baris genap dan ganjil

Salah satu cara untuk agar membaca tabel besar menjadi lebih mudah adalah dengan memberi warna pada baris yang berselang. Sebagai contoh, tabel berikut mempunyai latar belakang wana abu-abu muda untuk baris genap dan putih untuk untuk yang ganjil. Aturan untuk hal tersebut sangatlah sederhana:

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

Month	1994	1995	1996	1997	1998	1999	2000	2001	2002
Jan	14	13	14	13	14	11	11	11	11
Feb	13	15	12	15	15	12	14	13	13
Mar	16	15	14	17	16	15	14	15	15
Apr	17	16	17	17	17	15	15	16	16
May	21	20	20	21	22	20	21	20	19
Jun	24	23	25	24	25	23	25	23	24
Jul	29	28	26	26	27	26	25	26	25
Aug	29	28	27	28	28	27	26	28	26
Sep	24	23	23	26	24	24	24	22	21
Oct	20	22	20	22	20	19	20	22
Nov	18	17	16	17	16	15	14	15
Dec	15	13	13	14	13	10	13	11

Bahkan, CSS memungkinkan untuk tidak hanya untuk selang satu, tapi menggunakan interval yang di tentukan. Kata kunci 'even' dan 'odd' hanyalah sebuah tulisan singkat agar lebih mudah. Misalnya, untuk sebuah daftar yang panjang anda dapat melakukan hal berikut:

li:nth-child(5n+3) {font-weight: bold}

Aturan ini mengatakan bahwa tiap baris kelima dibuat tebal, dimulai dari yang ketiga. Dalam kata lain, baris nomor  3, 8, 13, 18, 23, dst., akan menjadi tebal (bold).

Kolom genap dan ganjil

Hal yang sama juga berlaku untuk tabel kolom, tetapi harus ada elemen pada dokumen yang berhubungan dengan kolom. HTML menyediakan COL untuk hal tersebut. Tabel harus bermula dari satu COL untuk setiap kolom:

<table>
<col><col><col><col><col><col><col><col><col><col>
<tr><th>Month<th>1994<th>1995<th>1996...

(COL dapat digunakan untuk hal lain selain style, tetapi dalam hal ini apa yang kita butuhkan adalah bahwa elemen COL harus ada.) Aturan berikut memberi kolom pertama latar belakang kuning, dan kemudian tiap berselang satu kolom menjadi abu-abu, dimulai dari  yang ketiga:

col:first-child {background: #FF0}
col:nth-child(2n+3) {background: #CCC}

Month	1994	1995	1996	1997	1998	1999	2000	2001	2002
Jan	14	13	14	13	14	11	11	11	11
Feb	13	15	12	15	15	12	14	13	13
Mar	16	15	14	17	16	15	14	15	15
Apr	17	16	17	17	17	15	15	16	16
May	21	20	20	21	22	20	21	20	19
Jun	24	23	25	24	25	23	25	23	24
Jul	29	28	26	26	27	26	25	26	25
Aug	29	28	27	28	28	27	26	28	26
Sep	24	23	23	26	24	24	24	22	21
Oct	20	22	20	22	20	19	20	22
Nov	18	17	16	17	16	15	14	15
Dec	15	13	13	14	13	10	13	11

Latar belakang dari baris (TR) digambarkan didepan latar balakang dari kolom (COL), jadi bila anda ingin memastikan bahwa latar belakang kolom yang terlihat, anda tidak perlu menentukan latar belakang untuk baris..