Alternate background colors for list items
HtmlCssHtml Problem Overview
I have a list, and each item is linked, is there a way I can alternate the background colors for each 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>
Html Solutions
Solution 1 - Html
How about some lovely CSS3?
li { background: green; }
li:nth-child(odd) { background: red; }
Solution 2 - Html
If you want to do this purely in CSS then you'd have a class that you'd assign to each alternate list item. E.g.
<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>
If your list is dynamically generated, this task would be much easier.
If you don't want to have to manually update this content each time, you could use the jQuery library and apply a style alternately to each <li>
item in your list:
<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>
And your jQuery code:
$(document).ready(function(){
$('#myList li:nth-child(odd)').addClass('alternate');
});
Solution 3 - Html
You can achieve this by adding alternating style classes to each list item
<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>
And then styling it like
li { backgorund:white; }
li.odd { background:silver; }
You can further automate this process with javascript (jQuery example below)
$(document).ready(function() {
$('table tbody tr:odd').addClass('odd');
});
Solution 4 - Html
Try adding a pair of class attributes, say 'even' and 'odd', to alternating list elements, e.g.
<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 a <style> section of the HTML page, or in a linked stylesheet, you would define those same classes, specifying your desired background colours:
li.even { background-color: red; }
li.odd { background-color: blue; }
You might want to use a template library as your needs evolve to provide you with greater flexibility and to cut down on the typing. Why type all those list elements by hand?
Solution 5 - Html
This is set background color on even and odd li:
li:nth-child(odd) { background: #ffffff; }
li:nth-child(even) { background: #80808030; }
Solution 6 - Html
Since you using standard HTML you will need to define separate class for and manual set the rows to the classes.
Solution 7 - Html
You can do it by specifying alternating class names on the rows. I prefer using row0
and row1
, which means you can easily add them in, if the list is being built programmatically:
for ($i = 0; $i < 10; ++$i) {
echo '<tr class="row' . ($i % 2) . '">...</tr>';
}
Another way would be to use javascript. jQuery is being used in this example:
$('table tr:odd').addClass('row1');
Edit: I don't know why I gave examples using table rows... replace tr
with li
and table
with ul
and it applies to your example
Solution 8 - Html
If you use the jQuery solution it will work on IE8:
jQuery
$(document).ready(function(){
$('#myList li:nth-child(odd)').addClass('alternate');
});
CSS
.alternate {
background: black;
}
If you use the CSS soloution it won't work on IE8:
li:nth-child(odd) {
background: black;
}
Solution 9 - Html
You can by hardcoding the sequence, like so:
li, li + li + li, li + li + li + li + li {
background-color: black;
}
li + li, li + li + li + li {
background-color: white;
}