Menu
I want to style my list like this:
^^ 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.
522
To bold the text in HTML, use either the strong tag or the b (bold) tag. Browsers will bold the text inside both of these tags the same, but the strong tag indicates that the text is of particular importance or urgency. You can also bold text with the CSS font-weight property set to “bold.”
To specify the style for a list, use the list-style property to specify the type of marker. The selector in your CSS rule can either select the list item elements li , or it can select the parent list element ul so that its list elements inherit the style.
The quickest way to display a list on a single line is to give the <li> elements a display property value of inline or inline-block . Doing so places all the <li> elements within a single line, with a single space between each list item.
Use css3 selector nth-child:
ol>li:nth-child(odd){
font-weight:bold;
}
Here: http://jsfiddle.net/FwTBU/
65
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
