with numbers another color

Question

<ol>
   <li>test</li>
   <li>test</li>
</ol>

will show as:

1. test
2. test

I want to have numbers coloured and text black!

I can edit the css, but I do not have access to the HTML.

Answer 1

@kdgregory 's code worked for me, but it affected my bulleted lists. I changed li to ol li to prevent the bullet items from being affected. Like so:

ol { counter-reset: item }
ol li { display: block }
ol li:before { content: counter(item) ". "; counter-increment: item; color: red; }

P.S. I also prefer to use uppercase in CSS for elements like BODY so I can easily distinguish it from classes .body and ids #body.

Answer 2

It's a bit late for this but I want to share it with the community, took me a long while to do this. I found a solution to change the OL numbers background and color that works on every browser. Requires an extra tag inside the li.

See it here

Answer 3

This is easy, as long as you don't want to assign different colours to different list item numbers. No HTML modifications necessary. Might not work in 100% of browsers though..

ol {color:red;}
ol li {color:black;}

Answer 4

too bad you can't edit the html... how about js?

<script>
var x = document.getElementsByTagName('li');
for (i=0; i<x.length; i++) { x[i].innerHTML ="<span>" + x[i].innerHTML + "</span>" }

// or with jQuery
$('.li').each(function(){this.innerHTML="<span>" + this.innerHTML + "</span>" })
</script>

<style>
li {color: #DDD;}
li span {color: black;}
</style>

if not, maybe a good-enough solution would be

ol {background-color: #DDD;}
li {background-color: white;}

Answer 5

This should do what you're looking for:

http://archivist.incutio.com/viewlist/css-discuss/67894

HTML

<ol>
    <li>1 some text here</li>
    <li>2 some more text that can span longer than one line</li>
</ol>

CSS

ol { list-style: none; padding-left: 2em; text-indent: -1em;}

li:first-letter { float: left; 
                  font-size: ??; 
                  color: white; 
                  background: orange; 
                  line-height: 1.0; }

Except you'll want to change the color and background according to your design.

This next one is overkill, but gives you a great deal of information on how to style lists:

http://print.wordpress.com/2006/02/22/css-beautifully-numbered-lists/

-Adam