リストアイテムの代替背景色

リストがあり、各アイテムがリンクされています。各アイテムの背景色を変更する方法はありますか？

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

素敵なCSS3はどうですか？

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

これをCSSで純粋に実行したい場合は、各代替リスト項目に割り当てるクラスがあります。例えば

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

リストが動的に生成される場合、このタスクははるかに簡単になります。

このコンテンツを毎回手動で更新する必要がない場合は、jQueryライブラリを使用<li>して、リスト内の各アイテムにスタイルを交互に適用できます。

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

そしてあなたのjQueryコード：

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

これは、各リスト項目にスタイルクラスを交互に追加することで実現できます。

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

それからスタイリングして

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

このプロセスをjavascriptでさらに自動化できます（以下のjQueryの例）

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

「偶数」と「奇数」のように、クラス属性のペアを交互のリスト要素に追加してみてください。

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

HTMLページの<style>セクション、またはリンクされたスタイルシートで、同じクラスを定義して、必要な背景色を指定します。

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

必要に応じてテンプレートライブラリを使用すると、柔軟性が高まり、タイピングを減らすことができます。なぜこれらすべてのリスト要素を手動で入力するのですか？

標準HTMLを使用しているため、個別のクラスを定義し、行をクラスに手動で設定する必要があります。

行でクラス名を交互に指定することでそれを行うことができます。私はrow0and を使用row1することを好みます。つまり、リストがプログラムで作成されている場合は、それらを簡単に追加できます。

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

別の方法は、javascriptを使用することです。この例ではjQueryが使用されています。

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

編集：なぜテーブルの行を使用して例を挙げたのかわかりません...置換trしてli、置換しtableてul、それはあなたの例に適用されます

jQueryソリューションを使用する場合、IE8で動作します。

jQuery

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

CSS

.alternate {
background: black;
}

CSSソリューションを使用する場合、IE8 では機能しません。

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

これは、偶数および奇数のliの背景色に設定されています。

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

シーケンスを次のようにハードコーディングすることでできます：

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

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