CODEWITHSUNDEEP
htmlcss
Faisal
Faisal

Reputation: 878

How to style every other item in a list as bold?

I want to style my list like this:

  1. List item
  2. List item
  3. List item
  4. List item
  5. List item

^^ you see here the first is bold, second is normal, third is bold, and so on.

I want to make the same thing dynamically on my list.

Upvotes: 12

Views: 14908

Answers (4)

Joe
Joe

Reputation: 15802

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>

Upvotes: 1

Richard Inglis
Richard Inglis

Reputation: 5958

li:nth-child(odd) { font-weight:bold }
li:nth-child(even) { font-weight:normal }

Upvotes: 0

Gregoire
Gregoire

Reputation: 24832

ol li
{
  font-weight:normal
}

ol li:nth-child(odd){
    font-weight:bold;
}

Upvotes: 0

welldan97
welldan97

Reputation: 3076

Use css3 selector nth-child:

ol>li:nth-child(odd){
    font-weight:bold;
}​

Here: http://jsfiddle.net/FwTBU/

Upvotes: 30

Related Questions