How to style every other item in a list as bold?
Something like this should do the job
ul.zebra li:nth-child(odd),
ol.zebra li:nth-child(odd)
{
font-weight: bold;
}
And your markup would be
<ul class="zebra">
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
or
<ol class="zebra">
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>
ul.zebra li:nth-child(odd),
ol.zebra li:nth-child(odd)
{
font-weight: bold;
}
<ul class="zebra">
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
<ol class="zebra">
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>
Use css3 selector nth-child
:
ol>li:nth-child(odd){
font-weight:bold;
}
Here: http://jsfiddle.net/FwTBU/