Warna latar belakang alternatif untuk item daftar

Saya memiliki daftar, dan setiap item ditautkan, adakah cara saya dapat mengganti warna latar belakang untuk setiap item?

<ul>
    <li><a href="link">Link 1</a></li>
    <li><a href="link">Link 2</a></li>
    <li><a href="link">Link 3</a></li>
    <li><a href="link">Link 4</a></li>
    <li><a href="link">Link 5</a></li>
</ul>

Bagaimana dengan CSS3 yang bagus?

li { background: green; }
li:nth-child(odd) { background: red; }

Jika Anda ingin melakukan ini murni di CSS maka Anda akan memiliki kelas yang akan Anda tetapkan untuk setiap item daftar alternatif. Misalnya

<ul>
    <li class="alternate"><a href="link">Link 1</a></li>
    <li><a href="link">Link 2</a></li>
    <li class="alternate"><a href="link">Link 3</a></li>
    <li><a href="link">Link 4</a></li>
    <li class="alternate"><a href="link">Link 5</a></li>
</ul>

Jika daftar Anda dibuat secara dinamis, tugas ini akan jauh lebih mudah.

Jika Anda tidak ingin setiap kali memperbarui konten ini secara manual, Anda dapat menggunakan pustaka jQuery dan menerapkan gaya secara bergantian ke setiap <li>item dalam daftar Anda:

<ul id="myList">
    <li><a href="link">Link 1</a></li>
    <li><a href="link">Link 2</a></li>
    <li><a href="link">Link 3</a></li>
    <li><a href="link">Link 4</a></li>
    <li><a href="link">Link 5</a></li>
</ul>

Dan kode jQuery Anda:

$(document).ready(function(){
  $('#myList li:nth-child(odd)').addClass('alternate');
});

Anda dapat mencapai ini dengan menambahkan kelas gaya bergantian ke setiap item daftar

<ul>
    <li class="odd"><a href="link">Link 1</a></li>
    <li><a href="link">Link 2</a></li>
    <li class="odd"><a href="link">Link 2</a></li>
    <li><a href="link">Link 2</a></li>
</ul>

Dan kemudian menatanya seperti

li { backgorund:white; }
li.odd { background:silver; }

Anda selanjutnya dapat mengotomatiskan proses ini dengan javascript (contoh jQuery di bawah)

$(document).ready(function() {
  $('table tbody tr:odd').addClass('odd');
});

Coba tambahkan sepasang atribut kelas, katakan 'genap' dan 'ganjil', ke elemen daftar bergantian, mis

<ul>
    <li class="even"><a href="link">Link 1</a></li>
    <li class="odd"><a href="link">Link 2</a></li>
    <li class="even"><a href="link">Link 3</a></li>
    <li class="odd"><a href="link">Link 4</a></li>
    <li class="even"><a href="link">Link 5</a></li>
</ul>

Di bagian <style> halaman HTML, atau di stylesheet tertaut, Anda akan menentukan kelas yang sama, menentukan warna latar belakang yang Anda inginkan:

li.even { background-color: red; }
li.odd { background-color: blue; }

Anda mungkin ingin menggunakan pustaka template karena kebutuhan Anda berkembang untuk memberi Anda fleksibilitas yang lebih besar dan untuk mengurangi pengetikan. Mengapa mengetik semua elemen daftar itu dengan tangan?

Karena Anda menggunakan HTML standar, Anda perlu menentukan kelas terpisah untuk dan mengatur baris secara manual ke kelas.

Anda dapat melakukannya dengan menentukan nama kelas bergantian pada baris. Saya lebih suka menggunakanrow0 dan row1, yang berarti Anda dapat dengan mudah menambahkannya, jika daftar sedang dibuat secara terprogram:

for ($i = 0; $i < 10; ++$i) {
    echo '<tr class="row' . ($i % 2) . '">...</tr>';
}

Cara lain adalah dengan menggunakan javascript. jQuery digunakan dalam contoh ini:

$('table tr:odd').addClass('row1');

Sunting: Saya tidak tahu mengapa saya memberi contoh menggunakan baris tabel ... ganti trdengan lidan tabledengan uldan itu berlaku untuk contoh Anda

Jika Anda menggunakan solusi jQuery, itu akan berhasil di IE8:

jQuery

$(document).ready(function(){
$('#myList li:nth-child(odd)').addClass('alternate');
});

CSS

.alternate {
background: black;
}

Jika Anda menggunakan solusi CSS, ini tidak akan berfungsi di IE8:

li:nth-child(odd) {
    background: black;
}

Ini mengatur warna latar belakang pada gen genap dan ganjil:

  li:nth-child(odd) { background: #ffffff; }
  li:nth-child(even) { background: #80808030; }

Anda dapat melakukan hardcode urutan tersebut, seperti:

li, li + li + li, li + li + li + li + li {
  background-color: black;
}

li + li, li + li + li + li {
  background-color: white;
}