Dokumen ini adalah terjemahan dari CSS tips & tricks - CSS: even and odd rules dan mungkin terdapat kesalahan penerjemahan.

Dokumen aslinya dapat di temukan di: http://www.w3.org/Style/Examples/007/evenodd

Penerjemah: Edwin Rene

Web Style Sheets
CSS tips & tricks

(This page uses CSS style sheets)

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}
Month199419951996199719981999200020012002
Jan141314131411111111
Feb131512151512141313
Mar161514171615141515
Apr171617171715151616
May212020212220212019
Jun242325242523252324
Jul292826262726252625
Aug292827282827262826
Sep242323262424242221
Oct2022202220192022
Nov1817161716151415
Dec1513131413101311

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}
Month199419951996199719981999200020012002
Jan141314131411111111
Feb131512151512141313
Mar161514171615141515
Apr171617171715151616
May212020212220212019
Jun242325242523252324
Jul292826262726252625
Aug292827282827262826
Sep242323262424242221
Oct2022202220192022
Nov1817161716151415
Dec1513131413101311

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..

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
created 6 Feb 2003;
last updated $Date: 2007/10/27 00:47:16 $ GMT