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/

Tags:

Html

Css