Colori di sfondo alternativi per gli elementi dell'elenco

Ho un elenco e ogni articolo è collegato, c'è un modo per alternare i colori di sfondo per ogni articolo?

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

Che ne dici di un bel CSS3?

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

Se vuoi farlo esclusivamente in CSS, avresti una classe che assegneresti a ciascun elemento dell'elenco alternativo. Per esempio

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

Se il tuo elenco viene generato dinamicamente, questa operazione sarebbe molto più semplice.

Se non vuoi dover aggiornare manualmente questo contenuto ogni volta, puoi utilizzare la libreria jQuery e applicare uno stile alternativamente a ciascun <li>elemento nell'elenco:

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

E il tuo codice jQuery:

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

È possibile ottenere ciò aggiungendo classi di stile alternate a ciascun elemento dell'elenco

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

E poi lo styling come

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

Puoi automatizzare ulteriormente questo processo con javascript (esempio jQuery di seguito)

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

Prova ad aggiungere una coppia di attributi di classe, ad esempio "pari" e "dispari", agli elementi dell'elenco alternati, ad es

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

In una sezione <style> della pagina HTML, o in un foglio di stile collegato, definiresti le stesse classi, specificando i colori di sfondo desiderati:

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

Potresti voler utilizzare una libreria di modelli man mano che le tue esigenze evolvono per offrirti maggiore flessibilità e ridurre la digitazione. Perché digitare a mano tutti quegli elementi dell'elenco?

Dal momento che utilizzi HTML standard, dovrai definire classi separate e impostare manualmente le righe sulle classi.

Puoi farlo specificando nomi di classi alternati sulle righe. Preferisco usare row0e row1, il che significa che puoi aggiungerli facilmente, se l'elenco viene creato in modo programmatico:

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

Un altro modo sarebbe usare javascript. jQuery viene utilizzato in questo esempio:

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

Modifica: non so perché ho fornito esempi utilizzando le righe della tabella ... sostituisci trcon lie tablecon ule si applica al tuo esempio

Se usi la soluzione jQuery funzionerà su IE8:

jQuery

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

CSS

.alternate {
background: black;
}

Se utilizzi l'assolo di CSS , non funzionerà su IE8:

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

Questo è il colore di sfondo impostato su li pari e dispari:

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

Puoi codificare la sequenza, in questo modo:

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

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