Membuat Tampilan List/Daftar dengan Warna Berselingan secara Otomatis

Melanjut sedikit tentang bagaimana JQuery bisa mengubah tampilan list menjadi berbeda warna antara list genap dan list ganjil, ini adalah sebagian kecil cara kerjanya.
Sebagai contoh, kita buat sebuah kerangka list seperti ini (boleh ordered listataupun unordered list):

<ul class='kuda-zebra'>
     <li>Andai Saja</li>
     <li>Engkau Tahu</li>
     <li>Betapa Aku</li>
     <li>Kebelet Pipis</li>
     <li>Maukah...</li>
</ul>

Di sini kita memakai <ul> atau unordered list.

Sekarang kita buat kode pemodel sederhana untuk bahan praktek tersebut seperti ini:

ul.kuda-zebra  {font-weight:bold;}
.kuda-zebra li {color:darkRed;}

Maka nantinya hasilnya akan tampak seperti ini:

Sekarang kita terapkan sistem JQuery sederhana seperti ini:

$(document).ready(function() {
     $('ul.kuda-zebra li:even').addClass('kampret');
});

Lalu tambahkan sebuah pemodel baru dengan nama li.kampret (maksudnya elemen <li> yang memiliki class "kampret") dan buat deklarasi pewarnaan yang berbeda (misalnya hijau tua):

ul.kuda-zebra  {font-weight:bold;}
.kuda-zebra li {color:darkRed;}
li.kampret     {color:darkGreen;}

Nah, sekarang, elemen listmu akan berubah warna menjadi seperti ini:

Menarik bukan? (Jawab: tidak juga)

Ada dua hal penting yang mempengaruhi perubahan warna ini, yaitu pada CSS li.kampret{ ... } dan dari JQuery itu sendiri.
Perhatikan kode ini: $('ul.kuda-zebra li:even').addClass('kampret');
Kode tersebut dibaca: Elemen <li> bernilai genap yang berada dalam elemen <ul> dengan class "kuda-zebra" akan mendapatkan jatah class "kampret" satu-satu secara otomatis.
Nah, karena kita sudah menentukan bahwa elemen <li> dengan class "kampret" akan mendapatkan tampilan berwarna hijau tua (li.kampret{color:darkGreen;}), maka berubahlah tampilan setiap elemen <li> bernilai genap secara otomatis.

:even artinya genap, :odd artinya ganjil

Sebenarnya, meskipun tidak memakai JQuery, kita juga bisa menerapkan sistem ini dengan menuliskannya secara manual seperti ini:

<ul class='kuda-zebra'>
     <li>Ganjil</li>
     <li class='kampret'>Genap</li>
     <li>Ganjil</li>
     <li class='kampret'>Genap</li>
     <li>Ganjil</li>
</ul>

Tapi bukankah itu adalah pekerjaan yang melelahkan? (Jawab:Hmmm...)
Asal tahu saja, penerapan sistem ini juga digunakan dalam Accordion TOCbuatan Abu Farhan, juga pada menu navigasi JQuery yang warnanya cokelat itu.

ul li:nth-child(even) {color:green;}

ul.kuda-zebra {font-weight:bold;}
ul.kuda-zebra li {color:darkred;}
ul.kuda-zebra li.kampret {color:darkgreen;}
ul.kuda-zebra li:hover,
ul.kuda-zebra li.kampret:hover {color:orange;}

#main-wrapper > div:nth-child(odd) {
width:300px !important;
}

.post-outer:nth-of-type(odd) {
width:300px !important;
}