help with <ol><li> behavior

**illusionbuster** · 06-16-2009, 10:52 AM

I am trying to have my <li> show up in red but I want the text that follows to be in black.
I have a CSS as follows: li {color:red;}
But in order to have text in black I have to use either <font color or a font class="color" or a <span class="color">. Is there a way of cancelling the effect of the text being red following the <li> being red? thanks
ib

**jthayne** · 06-16-2009, 11:40 AM

So you are looking to make the dot/number of the list a different color from the text, right?

If so, then you have two choices:
1. Use an image as the marker
2. Put the text within a <span> tag that is styled differently from the list as in the following code:

HTML Code:

<html>
    <head>
        <style type="text/css"><!--
            ul.specials li { color:green; } 
            ul.specials li span { color:navy; } 
        --></style>  
    </head>  
    <body>  
        <ul class="specials">  
            <li><span>One.</span></li>  
            <li><span>Two.</span></li>  
        </ul>  
    </body> 
</html>

Personally, I would choose the second choice, but that is up to you.

Code borrowed from http://http://www.gidforums.com/t-7254.html

**illusionbuster** · 06-16-2009, 12:47 PM

Thanks for the tip it work perfectly.
I did something similar but used it a bit differently and your method saves some xtra typing. and since I am using it a lot of times it save a real lot of typing.
here is how I did it.
<style type="text/css">
li {color:red;}
.black {color:#000000;}
</style>
<body>
<ol>
<li><span class="black">One.</span></li>
</ol>
</body>

As you can see your method putting the class in <ol> saves me from a lot of work considering there may be up to 10 <li> items. Again I thank you very much.

**jthayne** · 06-16-2009, 05:31 PM

No problem. Glad to be of assistance.

Thread: help with <ol><li> behavior

Thread Tools

Related

Pop up menu AP Div buttons behavior Forum: CSS Forum

Unusual CSS behavior Forum: CSS Forum

Strange view source behavior. Forum: HTML Forum

help with <ol><li> behavior

Re: help with <ol><li> behavior

Re: help with <ol><li> behavior

Re: help with <ol><li> behavior

Tags for this Thread